王一佳 - 别让昨天的风把今天吹乱 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2026-5-15 16:18

王一佳 - 别让昨天的风把今天吹乱

本帖最后由亚伦影音工作室于 2026-5-16 06:43 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
:root {--ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #fff887;--color-2: #fc89e5;--color-3: #fd27d2;--color-4: #9cf9fc;--color-5: #0dd7de;--color-6: #fbcb6d;--color-7: #fb8739;--color-8: #fa5f57;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8;}
#papa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1260px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background:url(https://pic1.imgdb.cn/item/6a0439bf6f6a2d474b49c031.png) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
   .intro {margin: 0px0px;z-index:1;
   width: 100%;
   height:100%;
   position: absolute;
background:linear-gradient(180deg, rgba(255, 0, 0, 0) 90%, rgba(8, 8, 13, 0.98)100%),url(https://pic1.imgdb.cn/item/6a0439bf6f6a2d474b49c031.png), linear-gradient(45deg, #e56420, #c555aa, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 2s linear infinite;
}
@keyframes hue-rotate {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}
#wrapper {
position: absolute;
padding: 5px;
font-weight:300;font-size:3.2em;
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);
   width: 100%;left: 50%;transform: translateX(-50%);z-index: 12;text-align: center;
bottom: 60px;
}
.char {
display: inline-block;
padding: 0 3px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
}
audio { position: absolute; left: 160px; top: 20px; }
@keyframes fadeIn {
100% {
transform: translate(0, 0);
opacity: 1;
}

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

}
.stop .char{animation-play-state: paused;}
#bnt{left: 10px;bottom: 10px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer; }
#bnt:hover { mask: unset; }
#pic{position:absolute;top:25px; left:28px;background:#fff;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
   width:22px;
   height: 22px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#fff; transform: translate(-50%, -50%);
clip-path: polygon(75% 50%, 0 0, 0 100%);
   width:22px;
   height: 22px}
#tmsg {position:absolute; z-index: 4;
   font: normal 13px sans-serif;
   color: #fff;
      bottom: 28px;
   left:64%;}
#prog {position:absolute;z-index: 40;
   width: 58%;
   height: 4px;background:#fff;
   cursor: pointer;
      bottom: 32px;border-radius: 20px;
left:5%;
}
#prog-bar {
         height: 100%;
         background: #ff6500;
         width: 0%;border-radius: 20px;
   }

#dt{z-index: 40;
   position:absolute;
   width: 35px;
   height: 34px;filter:invert(0%);
   bottom: 16px;border-radius: 0px;
left: 72%;
   cursor: pointer;
}
#mutedbnt{z-index: 40;
width: 25px;
   height: 24px;
   filter:invert(0%);
left: 0%;
   cursor: pointer;
}
#imeg{z-index: -1;
width: 25px;
   height: 24px;
   filter:invert(0%);
left: 0%; position:absolute;

}
#volumeSlider{bottom: 42px;left: 75%;z-index: 40;
         position:absolute;
      width: 17%; height: 3px;border-radius: 20px;

}
input {
-webkit-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background-color: transparent;
width: 100%;
}
::-webkit-slider-runnable-track {
height: 4px;border-radius: 20px;
background: #eee;
}
::-webkit-slider-container {
height: 18px;border-radius: 30px;
overflow: hidden;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #f44336;
border: 1px solid transparent;
margin-top: -4px;
border-image: linear-gradient(#f44336,#f44336) 0 fill / 4 10 4 0 / 0px 0px 0 2000px;
}

#loopbnt{z-index: 40;
   position:absolute;
   width: 22px;filter:invert(100%);
   height: 18px;background:#0000;
   bottom: 25px;border-radius: 0px;
right: 60px;
   cursor: pointer;
}

#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 300;left: 12%;top: 11%;color:#000}

#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px; bottom:26px; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div class='intro'></div>
<div id="bnt">
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="tmsg">00:00|00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"><div class="now"></div></div></div>
<div id="dt">
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif"id="mutedbnt" onClick="pc()"/>
<img src="https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png"id="imeg" />
</div>
<inputtype="range" min="0.1" max="1" step="0.1" value="0.8" id="volumeSlider" >
<br>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
<div id="testImg" >
<div id="wrapper"></div>
</div>
<audio id="aud"src="https://upfile.mp3.wf/down.php/df07204dfa3f20993eee9cba35d8de77.mp3" loop autoplay ></audio>
</div>
<script>
const gc = `别让昨天的风把今天吹乱-王一佳
词：胡三边@左白里
曲：胡三边@左白里
编曲：玄昌俊
吉他：玄昌俊
混音：T-one
和声：陈小琴
OP：晨琳文化
【版权所有未经许可请勿翻唱】
人生总有数不尽的烦
命运总设下道道的坎
路上的人呐要学会往前看
风雨再大也不过短暂
不必把往事一遍遍翻
不必感叹前路的艰难
就算山再高也有可绕的弯
水再深也有可渡的船
别让昨天的风把今天吹乱
别让心里的苦把笑容冲淡
漂泊在现实与理想之间为难
可这人生谁还没有点遗憾
别让昨天的风把今天吹乱
别让一时的难把脚步放慢
不要慌太阳落山有星光做伴
流过的泪会被时间一点点风干
不必把往事一遍遍翻
不必感叹前路的艰难
就算山再高也有可绕的弯
水再深也有可渡的船
别让昨天的风把今天吹乱
别让心里的苦把笑容冲淡
漂泊在现实与理想之间为难
可这人生谁还没有点遗憾
别让昨天的风把今天吹乱
别让一时的难把脚步放慢
不要慌太阳落山有星光做伴
流过的泪会被时间一点点风干
`;

   const gcAr = lrc2HC(gc);
   let curkey = 0, 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 = 0;
            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 ? 300 : -300);
                     const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                     span.style.cssText += `
                           color: #${Math.random().toString(10).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);
   }
</script>

<script>
let fs= true;
fullscreen.onclick = () => {
   fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
   fs = !fs;
}
image=document.getElementById('testImg');

bnt.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop')) :( aud.pause(),image.classList.add('stop'));

const intro= document.querySelector('.intro');
let mState = () => aud.paused ? (picc.style.opacity = '1',pic.style.opacity = '0',mutedbnt.style.opacity = '0',imeg.style.opacity = '1',intro.style.animationPlayState = 'paused') : (picc.style.opacity= '0',pic.style.opacity = '1',mutedbnt.style.opacity = '1',imeg.style.opacity = '0',intro.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

/*进度条进度时间*/
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');

aud.addEventListener('timeupdate', () => {
      varpercent= (aud.currentTime / aud.duration) * 100;
         progBar.style.width = percent + '%';
let p = (coordEnd - coordStart) / this.offsetWidth

   });

aud.addEventListener('timeupdate', () => {
            tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});

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;
   };
/*结束*/
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
aud.volume =volumeSlider.value;
});
         function pc() {
var img = document.getElementById("mutedbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif") {aud.muted= true;
img.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png"; volumeSlider.value=0;
} else {aud.muted= false;volumeSlider.value=0.8;
img.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";}
}

function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
</script>

杨帆发表于 2026-5-15 18:07

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

朵拉发表于 2026-5-15 19:09

问好亚伦老师，背景图片酷炫，歌曲好听耶{:4_204:}

红影发表于 2026-5-15 21:54

变色设计很奇妙，效果很惊艳。
欣赏亚伦老师好帖{:4_199:}

红影发表于 2026-5-15 21:55

同步歌词也很惊艳，这个帖子真棒{:4_187:}

页: [1]

花潮论坛's Archiver

王一佳 - 别让昨天的风把今天吹乱