论坛 › 欢乐水吧 › 从此天涯再也不相逢/修车老弟

亚伦影音工作室 发表于 2026-7-18 14:43

从此天涯再也不相逢/修车老弟

本帖最后由 亚伦影音工作室 于 2026-7-19 13:00 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin: 10px -300px; width: 1286px; height: 720px; background: gray url(https://pic1.imgdb.cn/i/033qLRjUbUaOoAC18kMCnC.png) center/cover no-repeat; box-shadow:0 0px 0px 0px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}

#tp {left: 0%;top: 0%;z-index: 1;
      width: 100%;
      height:100%;
      position: absolute;
background:url(https://pic1.imgdb.cn/i/033rROH7rvEX3egrOOCmDZ.png)no-repeat center/cover;
}

.filtered-background {left: 0%;top: 0%;
position: absolute;z-index: 1;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 30% 100%, 45% 0, 66% 0, 56% 100%, 100% 100%, 100% 0%);
background:url(https://pic1.imgdb.cn/i/033rROH7rvEX3egrOOCmDZ.png)no-repeat center/cover;
filter: url("#turbulence")
}
li-zi { position: absolute; top: 0px; width: 80px; height: 50px; border-radius: 0%; background:url('https://pic1.imgdb.cn/i/033rToGKw51N56TWgU2gyp.webp')no-repeat center/100% 100%; offset-path: path('M600 800 Q-500 150,1290 90'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 10s cubic-bezier(0,0.14,0,0.5) infinite var(--state),bs 1s infinite var(--state);z-index: 20; }
@keyframes fly { 100%{ offset-distance: 100%;} }
@keyframes bs { 50%{filter: hue-rotate(360deg)brightness(110%);} }

#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 80%;font:normal 3em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; color:transparent; z-index: 21;writing-mode: vertical-lr;white-space: pre;transform: translateY(0%);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: 10%; height: 100%; text-align: center;animation: var(--motion) var(--tt) linear forwards,bs 1sinfinite; animation-play-state: var(--state); }
@keyframes cover1{0% {letter-spacing: -30px;
          opacity: 1; transform: scale(0);
          color:#ff0000;
        }
        50% {letter-spacing: 10px;
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {letter-spacing: 10px;
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {letter-spacing: 10px;
          opacity: 1; transform: scale(1);
           color:#00aa00;
        }
       
}
@keyframes cover2 {0% {letter-spacing: -30px;
          opacity: 1; transform: scale(0);
          color:#ff0000;
        }
        50% {letter-spacing: 10px;
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {letter-spacing: 10px;
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {letter-spacing: 10px;
          opacity: 1; transform: scale(1);
           color:#00aa00;
        }
       
}



            
   

#btnplay { top:68%; left:10%;z-index: 100;
display: block;position: absolute;
    width: 150px; height: 220px;
    background: url(https://pic1.imgdb.cn/i/0fYmlgLV4HogPAvFGkqVRQ.png)no-repeat center/300px 220px;
animation: heart-burst steps(2) 2s infinite;
animation-play-state: var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -300px 0;}
}

#ptxt{width:100%;height:6px;font:800 18px/0px "STKaiti";color: #000;line-height:0px;bottom: 120px;left:15%;position: absolute;z-index: 110; }
#fullscreen{border-radius: 4px;position: absolute;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 100;
font:400 36px/0px "STKaiti";color: #fff;
border: none;
cursor: pointer;margin: 30px 35px;
}

</style>
<div id="papa">
<button id="fullscreen">全屏观赏</button>
<div id='tp'><div class="filtered-background"></div></div>
<svgid="reflect" >
<filter id="turbulence" x="0%" y="0%" width="100%" height="100%" >
    <feTurbulence id="ripples" numOctaves="6" seed="6" baseFrequency="0.02 0.05"></feTurbulence>
    <feDisplacementMap scale="8" in="SourceGraphic"></feDisplacementMap>
      <animate xlink:href="#ripples" attributeName="baseFrequency" dur="30s" keyTimes="0;0.5;1"
values="0.02 0.05;
      0.04 0.07;
      0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>

<divid="btnplay" ></div>
<div id="ptxt">0%</div>
<div id="lrc" data-lrc=""></div>

</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3386238236.MP3" autoplay loop></audio>

<script>
(function() {
        let mKey = 0, mFlag = true;
        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;};
        let averAdd = 0, offset = 0;
        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 geci = `从此天涯再也不相逢

作词Lyricist：斯琴高莉

作曲Composer：舟木楼

演唱：修车老弟

编辑制作：亚伦

晚风轻叹夜色微暗

那些往事在风中变淡

走过聚散斩断羁绊

再也不用被回忆纠缠

曾经期盼终成遗憾

誓言早就被时间推翻

回头去看顺其自然

没你的日子渐渐习惯

风儿吹散心头的思念

吹落那些执着的从前

就算有过太多的眷恋

也不想再为你红着眼

风儿吹散心头的思念

画上一个体面的句点

爱恨情仇随风飞多远

从此以后不再有亏欠

曾经期盼终成遗憾

誓言早就被时间推翻

回头去看顺其自然

没你的日子渐渐习惯

风儿吹散心头的思念

吹落那些执着的从前

就算有过太多的眷恋

也不想再为你红着眼

风儿吹散心头的思念

画上一个体面的句点

爱恨情仇随风飞多远

从此以后不再有亏欠

`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        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;}
        function playing() {
lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
       
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       
})();

new Array(total = 10).fill(0).map((i,k) => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${600 / total * k + 20}px;
               
                animation-delay: -${Math.random() * 20}s;
                --shadow: #${Math.random().toString(16).substring(1,1)};
        `;
        papa.prepend(i);
});


aud.addEventListener("timeupdate",function(){
                                var percent= aud.currentTime / aud.duration
                                var sp = 600 / 100 ;
                                var swidth =(percent * 100 * sp) + "px";
                                console.log(percent*100,swidth)
                                //保留2位小数
                                document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
                               
                        });

(function() {
         var mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      };
      aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? (aud.play(),reflect.unpauseAnimations()):(aud.pause(),reflect.pauseAnimations());
})();


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

红影 发表于 2026-7-18 19:33

制作漂亮，这些小飞机还是变色的呢。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-7-18 21:28

好听好看，谢谢 亚伦老师 精彩分享{:4_190:}

查看完整版本: 从此天涯再也不相逢/修车老弟