醉美水芙蓉 发表于 2026-6-28 16:07:30

人间风月皆回首

<meta charset="utf-8">
<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://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/18f9b6129a17f132735be40825cbd2d2.jpg) no-repeat center/cover;}
.filtered-background, .main-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 45% 100%, 42% 0, 62% 0, 52% 100%, 100% 100%, 100% 0%);
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/18f9b6129a17f132735be40825cbd2d2.jpg) no-repeat center/cover;
}

.filtered-background {
filter: url("#turbulence");
}
#player {position:absolute;top: 0%;z-index: 98;
left: 38%;
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);}

        }
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   top: 5%; cursor: pointer;left: 5%;z-index: 140;}

#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="bj">
<div class="containe">
<div class="main-background">
</div>
<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" >人间风月皆回首</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>

</div>
<audio id="aud" src="https://i.uik.cc/view.php/5d54a9cef3d1db189fff448c84ef9396.mp3" loop autoplay ></audio>
<script>
const gc = `人间风月皆回首
LRC编辑：醉美水芙蓉
往事悠悠随风走
一眼相逢惹温柔
无心撞进你怀中
眼眸深深藏情柔
人海茫茫几度秋
何其有幸能相守
岁月绵长共相守
冷暖朝夕手牵手
再回首情依旧
满心欢喜藏心头
漫漫前路有人候
从此余生无烦忧
再回首情深未休
岁岁时光并肩走
晚风轻拂旧时梦
一世温情共相守
人海茫茫几度秋
何其有幸能相守
岁月绵长共相守
冷暖朝夕手牵手
再回首情依旧
满心欢喜藏心头
漫漫前路有人候
从此余生无烦忧
再回首情深未休
岁岁时光并肩走
晚风轻拂旧时梦
一世温情共相守
再回首情依旧
满心欢喜藏心头
漫漫前路有人候
从此余生无烦忧
再回首情深未休
岁岁时光并肩走
晚风轻拂旧时梦
一世温情共相守
人间风月皆回首
此生与君共相守
谢谢欣赏！
`;
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 = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',reflect.unpauseAnimations()) :( aud.pause(),player.style.animationPlayState = 'paused',reflect.pauseAnimations());
let fs= true;
fullscreen.onclick = () => {
      fs ? (bj.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script>

klxf 发表于 2026-6-28 17:50:15

好听好看，谢谢分享

醉美水芙蓉 发表于 2026-6-28 20:22:31

klxf 发表于 2026-6-28 17:50
好听好看，谢谢分享

谢谢友友光临！

月明工作室 发表于 2026-6-30 09:16:06

欣赏了，问好芙蓉老师！

醉美水芙蓉 发表于 2026-6-30 10:28:47

月明工作室 发表于 2026-6-30 09:16
欣赏了，问好芙蓉老师！

谢谢明月老师光临！
页: [1]
查看完整版本: 人间风月皆回首