花甲走四方 发表于 2026-9-6 11:12

痛難了(情深緣

<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");
#papa { margin: 10px -300px; width: 1286px; height: 720px; background: gray url(https://pic1.imgdb.cn/i/033qLRjUbUaOoAC18kMCnC.png) center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}

#tp {left: 0%;top: 0%;z-index: 1;
      width: 100%;
      height:100%;
      position: absolute;
background:url('https://mpimg.cn/view.php/24587c9ec91aed2da613000072dbe8dd.jpg')no-repeat center/cover;
}

.filtered-background {left: 0%;top: 0%;
position: absolute;z-index: 1;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 30% 100%, 46% 0, 44% 0, 76% 100%, 100% 100%, 100% 0%);
background:url('http://qsltbbs.com/static/image/smiley/datu/ai.gif')no-repeat center/cover;
filter: url("#turbulence")
}


#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 50%;top:82%;transform: translate(-50%, -50%);font:normal 3em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; color:transparent;filter:hue-rotate(0deg)contrast(120%)brightness(200%); z-index: 21;}
#lrc::before {position: absolute;content: attr(data-lrc); width: 100%; height: 100%; filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }

@keyframes cover1{0% {
          opacity: 0; transform: scale(0.5);
          color:#ff0000;
        }
        50% {
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {
          opacity: 1; transform: scale(1.2);
           color:#00aa00;
        }
       
}
@keyframes cover2 {0% {
          opacity: 0; transform: scale(0.5);
          color:#ff0000;
        }
        50% {
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {
          opacity: 1; transform: scale(1.2);
           color:#00aa00;
        }
       
}
#btnplay { top:68%; left:10%;z-index: 100;
display: block;position: absolute;
    width: 150px; height: 220px;
    background: url('https://mpimg.cn/view.php/24587c9ec91aed2da613000072dbe8dd.jpg')no-repeat center/300px 220px;
animation: heart-burst steps(2) 2s infinite;
animation-play-state: var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -300px 0;}
}

#ptxt{width:100%;height:6px;font:800 18px/0px "STKaiti";color: #000;line-height:0px;bottom: 120px;left:15%;position: absolute;z-index: 110; }
#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 38px/0px "STKaiti";color: #ff0000;
border: none;
cursor: pointer;margin: 8px 5px;left: 80%;top:8%;
}

</style>
<div id="papa">
<button id="fullscreen">全屏观赏</button>
<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="30s" keyTimes="0;0.5;1"
values="0.02 0.05;
      0.04 0.07;
      0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>

<divid="btnplay" ></div>
<div id="ptxt">0%</div>
<div id="lrc" data-lrc=""></div>
</div>
<audio id="aud" src="https://mpimg.cn/view.php/f06115909fc7b5b5428371f6b83c987e.m4a" autoplay loop></audio>

<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `痛難了(情深緣

红影 发表于 2026-9-6 13:28

这个帖子缺少后面的代码，只到歌词第一句，后面的都没了。导致页面也有变形了。

梦江南 发表于 2026-9-6 18:15

高老师的帖子盖住了评分栏。
页: [1]
查看完整版本: 痛難了(情深緣