论坛 › 欢乐水吧 › 可惜风吹不走回忆

亚伦影音工作室 发表于 2026-7-13 18:08

可惜风吹不走回忆

本帖最后由 亚伦影音工作室 于 2026-7-14 12:12 编辑 <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{ position: relative; width: 1186px; height: 700px; margin-left: -320px; margin-top: 0; overflow: hidden; background:#000 url(https://pan.29o.cn/view.php/bf0a2cbe50086b1889a9069ad264c363.png)no-repeat center / cover; --state: paused;}
#vid {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
   
}

   .lrc {
      position: absolute;
      width: 100%;
      height: 60px; /* 只显示一行歌词高度 */
      top: 80%;
      left: 50%;
      transform: translate(-50%, -50%); /* 容器整体居中 */
      overflow: hidden;
      text-align: center;
    }

   .lrc #ul {filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
      width: 100%;
      padding: 0;
      list-style: none;
      transition: 0.1s all ease;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

   .lrc #ul li {
      font-size: 45px;
      color: #000;
      font-family:"Ma Shan Zheng", sans-serif;
      font-weight:500;
      transition: 0.1s all ease;
      list-style-type: none;
      text-align: center;
      padding: 0 10px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
      white-space: nowrap; /* 防止歌词换行 */
    }

.lrc #ul li span {
      margin: 0 8px;
      transform-origin: center center; /* x轴和y轴均以中心为原点 */
      transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
      display: inline-block; /* 确保transform-origin生效 */
    }
   
   .lrc #ul li span.active {
      font-family: "Ma Shan Zheng", "Microsoft YaHei", sans-serif;
      font-weight: 500;
      font-size: 48px;
      color: red;
      transform: scale(1.2)rotate(-360deg); /* 缩放效果 */
    }
   

    #btnplay { top:10%; left:10%;z-index: 20;
display: block;position: absolute; transform: rotateY(180deg);
    width: 250px; height: 250px;mix-blend-mode: difference;
    background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-burst steps(13) 2s infinite var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;}
}
#fullscreen{border-radius: 4px;position: relative;
color:#000;background:#0000;box-shadow:0px 0px 0px 1px #000;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;
}
</style>

    <div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3fddb063664ec09ccf4bcbbca2edc037_preview.mp4 " autoplay loop muted></video>
<divid="btnplay" ></div>
<div class="lrc">
    <ul id="ul"></ul>
      </div>
<button id="fullscreen">全屏观赏</button>
       </div>


    <audio id="audio" src="https://www.djdvd.com/plug/down.php?ac=music&lk=mp3&id=5932746f626e5a745a486433.mp3" loop autoplay ></audio>
    <script>
let lrc = `可惜风吹不走回忆
作词: 杨不乖
作曲: 曲多美
演唱: 杨不乖
出品: 亚伦影音
风吹过来一阵凉意
身边却再找不到你
如果已注定是这结局
为何当初还要相遇
我曾清空所有讯息
抹去你的所有痕迹
明明已相隔千里万里
为何思念还不停息
可惜风吹不走回忆
雨冲不走泪滴
我也没能把你忘记
好久没能和你联系
如今有谁陪你
你是否也曾把我想起
可惜风吹不走回忆
雨淋不走伤心
我也没能学会清醒
只是再没资格提起
和你那段曾经
我再爱你也只能 把你藏在心底
我曾清空所有讯息
抹去你的所有痕迹
明明已相隔千里万里
为何思念还不停息
可惜风吹不走回忆
雨冲不走泪滴
我也没能把你忘记
好久没能和你联系
如今有谁陪你
你是否也曾把我想起
可惜风吹不走回忆
雨淋不走伤心
我也没能学会清醒
只是再没资格提起
和你那段曾经
我再爱你也只能 把你藏在心底

`;
let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
       for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var words = lrcData.trim().split('');
            let lineWords = [];
            let startTime = parseTime(lrcTime);
            let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
                (parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
            words.forEach((word, index) => {
                lineWords.push({ time: startTime + index * wordDuration, text: word });
            });
            result.push(lineWords);
      }
function randomColor(){
    const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
    return colors;
}
      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) return i - 1;
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
      createElements();

      let containerHeight = container.clientHeight;
      let liHeight = 60;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;
      const visibleLines = 1;
      let prevIndex = -1;

      function setOffset() {
            let index = getIndex();
            if (index === -1) index = 0;

            let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
            ul.style.transform = `translateY(-${offset}px)`;

            if (prevIndex !== -1) {
                let prevLi = ul.children;
                if (prevLi) {
                  prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
                  prevLi.classList.remove('active');
                }
            }
            let currentLi = ul.children;
            if (currentLi) currentLi.classList.add('active');

            let currentTime = audio.currentTime;
            let currentLine = result;
            if (currentLine) {
                currentLine.forEach((wordObj, wordIndex) => {
                  let span = currentLi.children;
                  span.style.color = ul.style.color = randomColor();
                  if (currentTime >= wordObj.time &&
                        (wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
                        span.classList.add('active');
                  } else {
                        span.classList.remove('active');
                  }
                });
                const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
                if (!currentLyric) return;
               
                let charIndex = 0;
                for (let j = 0; j < currentLine.length; j++) {
                  if (currentLine.time <= currentTime) {
                        charIndex = j + 1;
                  }
                }
            
            }
prevIndex = index;
      }
audio.addEventListener("timeupdate", setOffset);

const mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');}
btnplay.onclick = () => audio.paused ? (audio.play(),vid.play() ): (audio.pause(),vid.pause());
audio.onplaying = audio.onpause = () => mState();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };

</script>

梦油 发表于 2026-7-13 19:54

亚伦制作作品的清晰度相当好

红影 发表于 2026-7-13 21:44

这帖子太唯美了，非常养眼，太赞了。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-7-13 22:10

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

查看完整版本: 可惜风吹不走回忆