余生未赴约（男女对唱完整版） - 音画音乐🎶 - 数字音乐论坛 - Powered by Discuz! Archiver

怀旧金典 › 音画音乐🎶 › 余生未赴约（男女对唱完整版）

四季歌 发表于 2026-9-30 11:19:49

余生未赴约（男女对唱完整版）

<style >
#papa {margin: 10px -320px;
width: 1468px;
height: 740px;
background:#000000 url('https://imgimg.qqdsw8.cn/view.php/b351cfd317d68583b9bd4ee1aa61b040.png')no-repeat center / cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;--state: paused;
z-index: 12345;
}
#vid1 {z-index:1;
   position: absolute;
   width: 100%;
   height: 100%;
top: 0px;
left: 0;
   object-fit: cover;

}

#vid {z-index:2;
   position: absolute;
   width: 550px;
   height: 550px;
top: 50px;
left: 100px;
   object-fit: cover;

}

#vid2 {z-index:2;
   position: absolute;
   width: 600px;
   height: 600px;
top: 0px;
left: -80px;
   object-fit: cover;

}

#box {width: 700px;position: absolute;top: -160px;left: 170px;z-index: 3;background:#000000 url(https://pic.3gbizhi.com/uploadmark/20240912/c64ea5883f19ad35de0ffce279b5eb8c.webp)no-repeat center / cover;
height: 700px;-webkit-mask: url('https://pic1.imgdb.cn/i/0349AhTcjJUEPzjgEvOSWp.png')no-repeat center/80% 80%;animation: round 6s linear infinite var(--state);}

@keyframes round {

0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%)rotateY(20deg)rotateX(-40deg);
opacity:1}
50% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%)rotateY(-20deg)rotateX(40deg);
opacity:1}
100%{
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(1)translate(0%,0%)rotateY(20deg)rotateX(-40deg);
opacity:1}

}
#bo {width: 250px;position: absolute;top: 65%;left:70px;transform: rotate(0deg); z-index: 20;background:#000000 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/274c57655969e3b75d5e9a0339005ea3.jpg')no-repeat center / cover;cursor: pointer;-webkit-mask: url('https://pic1.imgdb.cn/i/0349FoxsgAh0tPLiASKfs5.png')no-repeat center / cover;animation: rou 12s linear infinite var(--state);
height: 250px; }
#wz{font:normal 2em 华文新魏;position: absolute;top: 15%;left:55px;width: 250px; }
@keyframes rou {
0% {transform:rotate(360deg)scale(1)translate(0%,0%);
opacity:1}
50% {transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
100% {transform:rotate(-360deg)scale(1)translate(0%,0%);
opacity:1}

}

#lrc {
   --state: paused;
   --motion: cover2;
   --tt: 2s;
   --bg:linear-gradient(to right, #000078, #ff0000,#00aa00);
   position: absolute;z-index: 26;
   left: 52%;
   transform: translate(-50%);
   top: 85%;
   font:normal 3.0em 华文新魏;

   color: #000080;
   white-space: pre;
   -webkit-background-clip: text;
   filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
   position: absolute;
   content: attr(data-lrc);
   width: 20%;
   height: 100%;
   color: transparent;
   overflow: hidden;
   white-space: pre;
   background: var(--bg);

   -webkit-background-clip: text;
   animation: var(--motion) var(--tt) linear forwards;
   animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style >
<div id="papa">
<video id="vid1" src="https://imgimg.qqdsw8.cn/view.php/bfbc9bc767b464fa4d87180473001025.mp4" autoplay loop muted></video>
<div id="bo"><div id="wz">数字论坛</div></div>
<div id="box"><video id="vid" src="https://imgimg.qqdsw8.cn/view.php/bca5b7ffde71a2a5c3cea52c788e9859.mp4" autoplay loop muted></video></div>
<div id="lrc" data-lrc="余生未赴约（男女对唱完整版）"title="歌词显示">余生未赴约</div>
<audio id="aud" src="https://imgimg.qqdsw8.cn/view.php/394ce6e5fc88d9626f3f07a75e296d0f.mp3" autoplay loop></audio>
</div>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `余生未赴约（男女对唱完整）
写词：花甲走四方
谱曲：四季歌
音频制作：四季歌
【男】
晚风漫过旧长街
诺言落笔轻轻写
掌心藏着情热烈
愿将青春都倾泻
【女】
倾尽年华赴岁月
以为繁花不会谢
不问前路风雪叠
只想陪你度长夜
【男】
命运横划一道界
深情终究遭离别
曾是不分你我的世界
【女】
耗尽温柔与心结
只剩回忆层层叠
如今独守漫长昼夜
【合】
万般不舍难抵诀别
爱到终场留亏欠
【男】我倾尽全部,毫无保留
【女】你交出所有,不曾退后
【合】
缘分走到,分岔路口
相爱一场,不能相守
【合】
倾尽所有去爱,终究要分手
真心酿成苦酒,饮尽这哀愁
倾尽温柔抵挡,尘世的洪流
思念藏在心底,久久地停留
倾尽所有去留,难把你挽留
往事缠绕心头,泪水静静流
曾经十指紧扣,许诺到白头
只剩一段回忆,余生独自守
【男】倘若时光能回头
【女】仍愿为你再等候
【合】奈何缘分关窗口
相爱之人只放手
【男】倾尽所有爱过
【女】无缘共白头
【合】倾尽所有爱过,无缘共白头
`;

/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};
function randomColor(){
const colors = ['#880000','#ff0000','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
return colors;
}

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   let name = mFlag ? 'cover1' : 'cover2';
   lrc.innerHTML = lrcAr;
   lrc.dataset.lrc = lrcAr;
   lrc.style.setProperty('--motion', name);
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrc.style.color = randomColor();
   mKey += 1;
   mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 60),
   sec = parseFloat(val % 60);
   if (min < 10) min = '0' + min;
   if (sec < 10) sec = '0' + sec;
   return min + ':' + sec;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),box.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),box.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
<script>

   (function() {
   var mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.paused ? (vid.pause(),vid1.pause()): (vid.play(),vid1.play());
};

aud.onplaying = aud.onpause = () => mState();
bo.onclick = () => aud.paused ? aud.play(): aud.pause();

})();

</script>

mm-8305 发表于 2026-9-30 14:50:15

站长太有才了:kiss:，用苏诺做的吧，好听

页: [1]

查看完整版本: 余生未赴约（男女对唱完整版）