论坛 › 欢乐水吧 › 从此天涯再不相逢-沧桑老吴

亚伦影音工作室 发表于 2026-8-1 18:10

从此天涯再不相逢-沧桑老吴

本帖最后由 亚伦影音工作室 于 2026-8-2 09:57 编辑 <br /><br /><style type="text/css">
@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: #880000 url(https://image.hnol.net/c/2026-07/31/20/202607312007194831-5769293.jpg)no-repeat center/cover; box-shadow:0 0px 0px 0px #800000;display: grid; place-items: center; position: relative; z-index: 1; --state: running; overflow:hidden;}

.containe{
position: absolute;display: grid;place-items: center;margin: 0px 0;width: 100%;height: 100%;background: #880000 url(https://image.hnol.net/c/2026-07/31/20/202607312007194831-5769293.jpg)no-repeat center/cover;
}

.filtered-background, .main-background {
position: absolute;
height: 100%;
width: 100%;
background:url(https://image.hnol.net/c/2026-07/31/20/202607312007194831-5769293.jpg) no-repeat center/cover;
}

.filtered-background {
filter: url("#turbulence");
}



.cemp{
position: absolute;
top:40%; left:5%;
filter: drop-shadow(0 0 14px #00aa00);
animation: sp 6s linear 1 forwards var(--state);
}
.box {
position: absolute;
width: 220px;
height: 150px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #D2691E;


}
@keyframes sp {
0% { transform: scale(.2, .2);}
}
.cemp:hover { filter:drop-shadow(0 0 14px red); }
.box:nth-child(1) {
background: url(https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover;
   left:0px;top:0px;position: absolute;
animation: moveo 4s 3.05s infinite var(--state); }
.box:nth-child(2) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover;
animation: moveo 4s 2.25s infinite var(--state);}
.box:nth-child(3) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover;
animation: moveo 4s 1.5s infinite var(--state);}
.box:nth-child(4) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover;
animation: moveo 4s0.25s infinite var(--state);
}


@keyframes moveo {
0% {transform: perspective(400px) translate(50px) scale(1) rotateY(0deg);
    z-index: 4;}
25% {transform: perspective(400px) translate(300px) scale(1.5, 1.5) rotateY(50deg);
    z-index: 2;}
50% {transform: perspective(600px) translate(600px) scale(1) rotateY(0deg);
    z-index:3;}
75% {transform:translate(350px ) scale(.6, .6) rotateY(-20deg);
    z-index: 1;}
100% {transform: perspective(400px) translate(–80px) scale(1) rotateY(0deg);
    z-index: 2}
}

#stage {cursor: pointer;z-index: 100;
      --len: 40px;
       top:20%; left:82%;
      position: absolute;
      width: var(--len);
      height: var(--len);
      transform-style: preserve-3d;
      animation: rot 8s linear infinite var(--state);

}
#stage div {
      position: absolute;
      width: inherit;
      height: inherit;
      color: #ff0000;filter:hue-rotate(30deg)contrast(450%)brightness(840%);
       border-radius: 0px 0px ;
font-weight:100;
      font: 2em / var(--len) Ma Shan Zheng;
      text-align: center;
      left: 0; top: 0;
      opacity: 1;

}

@keyframes rot {100% { transform: rotatex(-12deg)rotateY(-360deg) scale(1);}
      0% { transform: rotatex(-12deg)rotateY(360deg) scale(1);}
      }
#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 32px/0px "STKaiti";color: #fff;
border: none;
cursor: pointer; top: 5%;
      left: 2%;
}
#wrapper {
                position: absolute;
                padding: 0px;
                font-weight:100;font-size:3em;font-family:"Ma Shan Zheng","STKaiti","SimHei",   cursive, serif;
                filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
white-space: pre;transform: translateX(0%);text-align: center;
      width:100%;height:10%;left: 0%;z-index: 20;
                top:80%;white-space: nowrap;
      }
      .char {
                display: inline-block;
                padding: 0px 4px;
                opacity: 0;
                transform: translate(var(--x), var(--y))rotate(-720deg) ;
                animation: fadeIn 1.5s var(--delay) forwards var(--state),flash 0.5s linear infinite var(--state);
      }
      
      @keyframes fadeIn {
                100% {
                        transform: translate(0, 50%);
                        opacity: 1;
                }

      }
      @keyframes flash {
                100% {filter: hue-rotate(360deg);}

      }


</style>
<div id="papa" >
<div id="fullscreen">全屏观赏</div>
<div id="stage"></div>

<div class="containe">
<div class="main-background"></div>
<div class="filtered-background"></div>
</div>

<svg id="reflect" >
<filter id="turbulence" x="0%" y="50%" width="100%" height="50%">
    <feTurbulence id="ripples" numOctaves="6" seed="6" baseFrequency="0.02 0.05"></feTurbulence>
    <feDisplacementMap scale="6" in="SourceGraphic"></feDisplacementMap>
      <animate xlink:href="#ripples" attributeName="baseFrequency" dur="40s" keyTimes="0;0;1"
values="0.02 0.05;
      0.04 0.07;
      0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>

<div id="wrapper"></div>

<div class="cemp" >
<span class="box"></span>
<span class="box"></span>
<span class="box"></span>
<span class="box"></span>
</div>
</div>
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=3389789293.MP3" loop autoplay></audio>

<script>

(function() {let txt = "从此天涯再不相逢)*沧桑老吴*";
let angle = 360 / txt.length;
let w = stage.clientWidth;
let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
let str = "";
for(j=0; j<txt.length; j++){
      let cc = `#${Math.random().toString(16).substr(-6)}`;
let ry = Math.floor(j*angle);
      str += `<div style="color: ${cc};transform:rotateY(${ry}deg) translateZ(${trz}px);">${txt.charAt(j)}</div>\n`;
}
stage.innerHTML = str;
})();

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


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

(function() {
const gc = `《从此天涯再不相逢》

作词：没心眼子

作曲：沧桑小杰

演唱：沧桑老吴

出品：亚伦影音工作室

从此天涯再不相逢

往后山河各自西东

往事匆匆吹尽长风

爱恨从此无影无踪

余生冷暖不再相拥

是非对错一笑包容

旧日情愫消散风中

你我缘分到此成空

人海漂泊独望长空

旧日情深埋入心中

一别之后各赴西穹

缘尽陌路不必相拥

酸甜苦辣独自去容

旧人旧事消散烟中

此生缘分到此皆空

一别千里再难相通

余生冷暖不再相拥

是非对错一笑包容

旧日情愫消散风中

你我缘分到此成空

人海漂泊独望长空

旧日情深埋入心中

一别之后各赴西穹

缘尽陌路不必相拥

酸甜苦辣独自去容

旧人旧事消散烟中

此生缘分到此皆空

一别千里再难相通

人海漂泊独望长空

旧日情深埋入心中

一别之后各赴西穹

缘尽陌路不必相拥

酸甜苦辣独自去容

旧人旧事消散烟中

此生缘分到此皆空

一别千里再难相通
`;

      const gcAr = lrc2HC(gc);
      let curkey = 0, isSeeking = false;

      audio.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(audio.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
      };

      audio.onended = () => {
                curkey = 0;
                aud.play();
      }

      audio.onseeked = () => calcKey();

      function lrc2HC(text) {
                let lrcAr = [];
                let ar = text.trim().split('\n');
                ar.sort();
                let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        if(reg.test(item)) {
                              let result = item.match(reg);
                              let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                              lrcAr.push(.trim()]);
                        }
                });
                return lrcAr ? lrcAr : ;
      };

      function calcKey() {
                for (let j = 0; j < gcAr.length; j++) {
                        if (audio.currentTime <= gcAr) {
                              curkey = j - 1;
                              break;
                        }
                }
                if (curkey < 0) curkey = 0;
                if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
                let time = gcAr?. ?? 0 - gcAr;
                isSeeking = false;
                showLrc(gcAr, wrapper, time);
      }

      function showLrc(str, targetElm, time) {
                if(isSeeking) return;
                targetElm.innerHTML = '';
                const chars = str.split('').map(c => c === ' ' ? ' ' : c);
                const frg = document.createDocumentFragment();
                chars.forEach((char, idx) => {
                        const span = document.createElement('span');
                        span.innerHTML = char;
                        span.classList.add('char');
                        const x = Math.random() * (Math.random() > 0.5 ? 800 : -800);
                        const y = Math.random() * (Math.random() > 0.5 ? 0:0);
                        span.style.cssText += `
                              color: #${Math.random().toString(16).substring(8,2)};
                              --x: ${x}px;
                              --y: ${y}px;
                              --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
      }
      })();
      
      

</script>

梦油 发表于 2026-8-1 18:34

亚伦影音工作室出的全是精品。{:5_116:}

红影 发表于 2026-8-1 20:44

这图片的转动和以前完全不同呢。
歌曲好听，制作漂亮，欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-8-1 21:11

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

查看完整版本: 从此天涯再不相逢-沧桑老吴