论坛 › 欢乐水吧 › 情难枕 - 林慧萍[风动]

亚伦影音工作室 发表于 2026-6-14 06:23

情难枕 - 林慧萍[风动]

本帖最后由 亚伦影音工作室 于 2026-7-24 17:48 编辑 <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 {margin: 150px -300px; width: 1186px; height:620px; background: url(https://pic1.imgdb.cn/item/6a2d5bf8f684928e3d6ab816.png) no-repeat center/cover;overflow: hidden; display: grid; place-items: center; box-shadow: 0px 0px 0px gray; position: relative; z-index: 1; --state: paused;}
#tp{position:absolute;width: 100%;height: 100%;left: 0%;top: 0%;background: url(https://pic1.imgdb.cn/item/6a2d5bf8f684928e3d6ab816.png) no-repeat center/cover;}
.filtered-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 37% 100%, 37% 0, 55% 0, 55% 100%, 100% 100%, 100% 0%);
background:url(https://pic1.imgdb.cn/item/6a2d5bf8f684928e3d6ab816.png) no-repeat center/cover;
filter: url("#turbulence")
}


#player {position:absolute;top: 55%;z-index: 98;
left: 25%;
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;cursor: pointer;
                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);}

        }
</style>
<div id="bj">
<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="10s" keyTimes="0;0;1"
values="0.02 0.05;
      0.04 0.07;
      0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>

<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<div id="wrapper" >MP3带歌词播放器</div>
</div>


<audio id="aud" src="http://music.163.com/song/media/outer/url?id=258361.mp3" loop autoplay ></audio>
<script>
const gc = `情难枕 - 林慧萍
作词 : 李子恒 作曲 : 李子恒
如果一切靠缘份
何必痴心爱着一个人
最怕藕断丝连难舍难分
多少黎明又黄昏
就算是不再流伤心泪
还有魂萦梦牵的深夜
那些欲走还留一往情深
都已无从悔恨

早知道 爱会这样伤人
情会如此难枕
当初何必太认真
早明白 梦里不能长久
相思不如回头
如今何必怨离分
除非是当作游戏一场
红尘任他凄凉
谁能断了这情份
除非把真心放在一旁
今生随缘聚散
无怨无悔有几人

如果一切靠缘份
何必痴心爱着一个人
最怕藕断丝连难舍难分
多少黎明又黄昏
就算是不再流伤心泪
还有魂萦梦牵的深夜
那些欲走还留一往情深
都已无从悔恨

早知道 爱会这样伤人
情会如此难枕
当初何必太认真
早明白 梦里不能长久
相思不如回头
如今何必怨离分
除非是当作游戏一场
红尘任他凄凉
谁能断了这情份
除非把真心放在一旁
今生随缘聚散
无怨无悔有几人
早知道 爱会这样伤人
情会如此难枕
当初何必太认真
早明白 梦里不能长久
相思不如回头
如今何必怨离分
除非是当作游戏一场
红尘任他凄凉
谁能断了这情份
除非把真心放在一旁
今生随缘聚散
无怨无悔有几人
/name/情难枕 `;
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 ? 0 : 0);
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 = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',reflect.unpauseAnimations()) :( aud.pause(),player.style.animationPlayState = 'paused',reflect.pauseAnimations());
</script>

杨帆 发表于 2026-6-14 11:12

有特色，谢谢亚伦老师精彩示范{:4_190:}

老谟深虑 发表于 2026-6-14 16:28

欣赏老师的代码音画，下午好！

梦油 发表于 2026-6-14 16:53

欣赏美图美曲，问好亚伦朋友。

小辣椒 发表于 2026-6-14 21:51

欣赏亚纶的精彩制作{:4_199:}

小辣椒 发表于 2026-6-14 21:55

https://pic1.imgdb.cn/item/6a2d5bf8f684928e3d6ab816.png

亚纶你这个png2.58MB我刷新N次才看见，你可以无视压缩一下，打开快快多了

红影 发表于 2026-6-14 22:36

这个制作太美了，欣赏亚伦老师好帖{:4_199:}

查看完整版本: 情难枕 - 林慧萍[风动]