爱在时光里回响*郑团长*

亚伦影音工作室 发表于 2026-8-3 21:04

爱在时光里回响郑团长

本帖最后由亚伦影音工作室于 2026-8-3 21:12 编辑 <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 -280px; 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;}
#djtu {position: absolute;
   top:0px; left:0px;z-index:3;
   width: 100%;
   height: 100%;transition: .1s;filter: invert(100%);
   mix-blend-mode: lighten;opacity:0.8;
}

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

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

.filtered-background {
filter: url("#turbulence");
}
#眼睛 {transform:scale(0.8);
   margin: 150px ;position: absolute;z-index: 2;
   left: 10%;
   perspective: 3000px;
   perspective-origin: 50% 40%;
}

#舞台 {
   position: relative;
   width: 300px;
   height: 300px;
   transform-style: preserve-3d;
   animation: spin 10s infinite linear var(--state);
   transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-15deg);
}

.演员 {
   position: absolute;
   width: 100%;
   height: 100%;
   display: grid;
   place-items: center;
   font: normal 2em arial sans-serif;
   opacity: 1;
}

.演员:nth-of-type(1) {
   background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/f3ba63c5575251c58ef8598e6c125b66.jpg')no-repeat center/cover;
   transform: translateZ(150px) rotateY(0deg);
}

.演员:nth-of-type(2) {
   background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/454dde99ea195df28b3dfcf4f8c2e2c8.jpg')no-repeat center/cover;
   transform: translateZ(-150px) rotateY(0deg);
}

.演员:nth-of-type(3) {
   background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/0e65f1262e6469a3d31cddf26fb8bd1a.jpg')no-repeat center/cover;
   transform: translateX(-150px) rotateY(90deg);
}

.演员:nth-of-type(4) {
   background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/06b03d67f486676bd36081b87fa8fd5a.jpg')no-repeat center/cover;
   transform: translateX(150px) rotateY(90deg);
}

.演员:nth-of-type(5) {
   background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/017352e982f3ca26d8814f893b44e6f5.jpg')no-repeat center/cover;
   transform: translateY(-150px) rotateX(90deg);
}

.演员:nth-of-type(6) {
   background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/b9330d9e866855870510266d98da1b85.jpg')no-repeat center/cover;
   transform: translateY(150px) rotateX(90deg);
}

@keyframes spin {
   from { transform: rotateX(0) rotateY(0) rotateZ(0); }
   to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

#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: #000;
border: none;
cursor: pointer; top: 5%;
   left: 2%;
}
#wrapper {
position: absolute;
padding: 0px;
font-weight:100;font-size:3.4em;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>
<img id = "djtu" src = "https://pic1.imgdb.cn/i/0340jPsa8KlGj0lIjMrU0Y.gif"></div>
<div class="containe">
<div class="main-background"></div>
<div class="filtered-background"></div>
</div>

<svg id="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="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 id="眼睛">
   <div id="舞台">
            <span class="演员"></span>
            <span class="演员"></span>
            <span class="演员"></span>
            <span class="演员"></span>
            <span class="演员"></span>
            <span class="演员"></span>
   </div>
</div>

</div>

<audio id="audio" src="http://music.163.com/song/media/outer/url?id=3366342228.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(),djtu.src = "https://pic1.imgdb.cn/i/0340jPsa8KlGj0lIjMrU0Y.gif") :(audio.pause(),reflect.pauseAnimations(),djtu.src = "https://") ;
})();

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-3 23:46

新颖别致，谢谢亚伦老师精彩分享{:4_190:}

页: [1]

花潮论坛's Archiver

爱在时光里回响郑团长