论坛 › 欢乐水吧 › 烟嗓哥《风吹起的过往》[水动]

亚伦影音工作室 发表于 2026-6-15 08:15

烟嗓哥《风吹起的过往》[水动]

本帖最后由 亚伦影音工作室 于 2026-6-15 08:17 编辑 <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");
      #bj {position:relative; overflow:hidden; width:1186px; height: 620px;border:2px solid #ccc; background-color:#800100;left:40%;transform:translate(-50%);font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
.containe{
   position:absolute;width: 100%;height: 100%;left: 0%;top: 0%;background: url(https://pic1.imgdb.cn/item/6a2e699c02f2532807685b7d.png) no-repeat center/cover;}
.filtered-background, .main-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 40% 100%, 45% 0, 62% 0, 50% 100%, 100% 100%, 100% 0%);
background:url(https://pic1.imgdb.cn/item/6a2e699c02f2532807685b7d.png) no-repeat center/cover;
}

.filtered-background {
filter: url("#turbulence");
}
#player {position:absolute;top: 2%;z-index: 98;
left: 45%;cursor: pointer;
width: 150px;
height: 150px;
display: grid;
        place-items: center;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        width: 30%;
        height: 30%;
display: grid;
        place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#wrapper {
                position:absolute ; left:20%; bottom:30px;
                font:500 50px/0px "Ma Shan Zheng","STKaiti";
                letter-spacing:4px;
                color:#ff0000;
                white-space:pre;
             width:860px; height: 70px; text-align:center;
            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);

            z-index:2;
      }
      .char {
                display: inline-block;
                padding: 0px 2px;
                opacity: 0;
                transform: translate(var(--x), var(--y))rotate(270deg) ;
                animation: fadeIn 1.5s var(--delay) forwards,flas 0.5s linear infinite;
        }
       
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 0%);
                        opacity: 1;
                }

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

        }

#biao{
    position:absolute ;background:#500000 url('https://pic1.imgdb.cn/item/699e5d8b01b9a5550a584809.png') no-repeat center/85% 85%;width:600px;height: 300px;border-radius:2%;transform: scale(0.4);cursor: pointer;
top: 180px; left: 3%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #000;
animation:sese 6sinfinite alternate;
}
#zhen{position: absolute; transform: translate(-50%, -50%);
    background:#ff0000;width:4px;height: 185px;border-radius:0% 0% 50% 50%;
transform-origin:center 0%;top: 270px; left: 50%;
animation:swin 0.4s ease-in-out infinite alternate;
}
#zhe{position: absolute; transform: translate(-50%, -50%);
    background:#ff0000;width:4px;height: 185px;opacity:0;border-radius:0% 0% 50% 50%;
transform-origin:center 0%;top: 270px; left: 50%;
animation:swsw 1s ease-in-out infinite alternate;
}
#dian { width: 20px;height: 20px; background: #fff;top: 270px; left: 50%;position: absolute;
border-radius:50%;transform: translate(-50%, -50%);
}
@keyframes swin{
100%{
    transform:rotate(-180deg);
}
    60%{
    transform:rotate(-160deg);
}
40%{
    transform:rotate(-170deg);
}

0%{
    transform:rotate(-140deg);
}
}
@keyframes swsw{
0%{
    transform:rotate(-255deg);
}
100%{
    transform:rotate(-255deg);
}
}
@keyframes sese{
0%{filter:hue-rotate(360deg)contrast(110%)brightness(90%);}
}
</style>
<div id="bj">
<div class="containe">
<div class="filtered-background"></div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</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>
<div id="wrapper" >MP3带歌词播放器</div>

<div id="biao">
<div id="zhen"></div>
<div id="zhe"></div>
<div id="dian"></div>
</div>

</div>
<audio id="aud" src="https://pan.29o.cn/view.php/5b54f634e264abdd4d660fcf2dc337c9.mp3" loop autoplay ></audio>
<script>
const gc = `烟嗓哥《风吹起的过往》
亚伦影音工作室出品
夏夜晚风吹过街巷
谁在岁月深处回头望
有些故事留在了过往
有些遗憾不敢再声张
我看着夜空一点星光
找不到曾停泊的海港
原来我们走散在远方
只留下回忆在风中荡
梦消散在盛夏的晚上
雨太急打湿了那月光
看那繁星坠落不知去向
我依然念着你的脸庞
心跟着骤雨迷失方向
风一吹又翻起了波浪
叹这红尘万丈太多阻挡
我还在等那地老天荒
我看着夜空一点星光
找不到曾停泊的海港
原来我们走散在远方
只留下回忆在风中荡
梦消散在盛夏的晚上
雨太急打湿了那月光
看那繁星坠落不知去向
我依然念着你的脸庞
心跟着骤雨迷失方向
风一吹又翻起了波浪
叹这红尘万丈太多阻挡
我还在等那地老天荒
`;
const gcAr = lrc2HC(gc);
let curkey = 1, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 1;
aud.play();
}
aud.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 (aud.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 ? -600 : 600);
const y = Math.random() * (Math.random() > 0.5 ? 0 : 0);
span.style.cssText += `
color: #${Math.random().toString(11).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}


player.onclick =biao.onclick = () => aud.paused ? (aud.play(),zhen.style.opacity= '1',zhe.style.opacity= '0',biao.style.animationPlayState =player.style.animationPlayState = 'running',reflect.unpauseAnimations()) : (aud.pause(),zhen.style.opacity= '0',zhe.style.opacity= '1',biao.style.animationPlayState =player.style.animationPlayState = 'paused',reflect.pauseAnimations());

</script>

红影 发表于 2026-6-15 10:36

水动效果好，指针频谱和特色歌词同步都很赞。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-6-25 18:06

漂亮~谢谢亚伦老师精彩分享{:4_190:}

小九 发表于 2026-6-25 18:30

特效很特别，歌好听，欣赏！{:4_199:}

查看完整版本: 烟嗓哥《风吹起的过往》[水动]