论坛 › 欢乐水吧 › 为爱痴狂 - 布兰希

亚伦影音工作室 发表于 2026-7-16 15:54

为爱痴狂 - 布兰希

本帖最后由 亚伦影音工作室 于 2026-7-16 16:10 编辑 <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");
#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://pic1.imgdb.cn/i/033qLRjUbUaOoAC18kMCnC.png)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(https://pic1.imgdb.cn/i/033qLRjUbUaOoAC18kMCnC.png)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://pic1.imgdb.cn/i/0fYmlgLV4HogPAvFGkqVRQ.png)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="http://music.163.com/song/media/outer/url?id=3387496645.mp3" 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 = `为爱痴狂 - 布兰希
歌词编辑：亚伦
我从春天走来你在秋天说要分开
说好不为你忧伤但心情怎会无恙
为何总是这样在我心中深苦藏着你
想要问你想不想陪我到地老天荒
如果爱情这样忧伤为何不让我分享
日夜都问你也不回答怎么你会变这样
想要问问你敢不敢
像你说过那样的爱我
想要问问你敢不敢
像我这样为爱痴狂
想要问问你敢不敢
像你说过那样的爱我
像我这样为爱痴狂
到底你会怎么想
为何总是这样在我心中深苦藏着你
说好不为你忧伤但心情怎会无恙
如果爱情这样忧伤为何不让我分享
日夜都问你也不回答怎么你会变这样
想要问问你敢不敢
像你说过那样的爱我
想要问问你敢不敢
像我这样为爱痴狂
想要问问你敢不敢
像你说过那样的爱我
像我这样为爱痴狂
到底你会怎么想
想要问问你敢不敢
像你说过那样的爱我
像我这样为爱痴狂
到底你会怎么想/name/为爱痴狂 - 布兰希.lrc
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
        function playing() {
lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
       
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       
})();

aud.addEventListener("timeupdate",function(){
                                var percent= aud.currentTime / aud.duration
                                var sp = 600 / 100 ;
                                var swidth =(percent * 100 * sp) + "px";
                                console.log(percent*100,swidth)
                                //保留2位小数
                                document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
                               
                        });

(function() {
         var mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      };
      aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? (aud.play(),reflect.unpauseAnimations()):(aud.pause(),reflect.pauseAnimations());
})();


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

玫瑰 发表于 2026-7-16 16:00

这是一首非常动听的歌曲。

梦油 发表于 2026-7-16 16:54

小猫咪的眼睛制作的真好。

红影 发表于 2026-7-16 20:48

漂亮的水波纹效果和小狐狸的播放器。这制作真美。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-7-16 22:04

好听好看，谢谢亚伦老师精彩分享{:4_190:}

查看完整版本: 为爱痴狂 - 布兰希