醉美水芙蓉 发表于 2026-8-29 22:20:21

等风来等花开

<meta charset="UTF-8">
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   .pa {top:70px;--offsetX: 81px; --bg: url('https://mobile-img-baofun.zhhainiao.com/pcwallpaper_ugc/live/7b837a969a17600a9190e6ae613e80af.jpg') no-repeat center/cover; color: lightblue; perspective: 1000px; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: -125px; right: 20px; }
    .mpic-wrap {
      position: absolute;
      bottom: 65px;
      width:110px;
      height: 120px;
      transform-style: preserve-3d;
      filter: drop-shadow(10px 10px 6px rgba(0,0,0,.95));
    }
    .mpic {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      transition: 1s;
    }
    .mpic img { width: 100%; height: 100%; }
    .mpic:nth-of-type(2) { transform: rotateY(-180deg); }
    .mpic-wrap:hover .mpic:nth-of-type(1) { transform: rotateY(180deg); }
    .mpic-wrap:hover .mpic:nth-of-type(2) { transform: rotateY(0); }
    #lyric {
      position: absolute;
      bottom: 20%;
      left: 65%;
      transform: translateX(-65%);
      font: normal 1.6em Microsoft YaHei, sans-serif;
      font-weight: bold;
      white-space: nowrap;
      pointer-events: none;
      z-index: 9999;
      color: rgba(255,255,255,0.3);
      background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-mask-image: linear-gradient(to right, #000 0%,#000 0%,transparent 0%);
      mask-image: linear-gradient(to right, #000 0%,#000 0%,transparent 0%);
    }
    .pd-vid{
      position:absolute;
      width:100%;
      height:100%;
      object-fit:cover;
    }
</style>
<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/04/5b5085d637d83.mp4 " autoplay loop muted></video>
    <div class="mpic-wrap">
      <div class="mpic">
            <img src="https://bbs.cnzv.cc/up/upload/pic/12/20260401-e4410edc02de4b485700629fa4bf061e.png" />
      </div>
      <div class="mpic">
            <img id="p1" class="rot" src="https://bbs.cnzv.cc/up/upload/pic/12/20260402-f84996be2b647758f3716fe878f0b59d.png" />
      </div>
    </div>
    <div id="lyric"></div>
</div>
<script>
var options = {
    pa: '.pa',
    urls: [['https://www.joy127.com/url/158359.mp3', '《等风来等花开》']],
    btns: ,
};
const songLrc = [
`等风来等花开-曲肖冰/凤璃
词: 李劲松
曲: 李劲松
OP: 冰曲文化
LRC编辑：醉美水芙蓉
记不清
这是第几次翻来覆去
远方的你是否会有感应
故事结局 如影随形
我梦见和你再次相遇
wu~
记不清
这是第几次说要放下你
窗外的大雨
也无法淋湿我的记忆
等风来 等花开
等思念跃入大海
我作帆 你乘船
一切重来
等天亮 等释怀
等阳光 刺破黑暗
等雨落
带走一切尘埃
记不清
这是第几次说要放下你
窗外的大雨
也无法淋湿我的记忆
等风来 等花开
等思念跃入大海
我作帆 你乘船
一切重来
等天亮 等释怀
等阳光 刺破黑暗
等雨落
带走一切尘埃
等风来 等花开
等思念跃入大海
我作帆 你乘船
一切重来
等天亮 等释怀
等阳光 刺破黑暗
等雨落
带走一切尘埃

谢谢欣赏！`,
];
function parseLines(text){
    const out=[];
    text.trim().split('\n').forEach(l=>{
      const m=l.match(/^\[(\d+):(\d+\.\d+)\]\s*(.*)$/);
      if(!m)return;
      out.push({ t: +m*60 + +m, txt: m });
    });
    return out;
}

let aud;
let lyricEl = document.getElementById('lyric');
let curIdx = -1;
let rafId = null;
let lines = [];

function loadJs(u,cb){
    var s=document.createElement('script');
    s.src=u;
    s.onload=cb;
    document.head.appendChild(s);
}

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

function tzRun() {
    aud = new AudPlayer(options);
    updateCurrentLrc();

    aud.aud.addEventListener('play', () => {
      if(!rafId) rafId = requestAnimationFrame(renderMask);
    });
    aud.aud.addEventListener('pause', () => {
      cancelAnimationFrame(rafId);
      rafId = null;
    });
    aud.aud.addEventListener('loadeddata', function(){
      curIdx = -1;
      cancelAnimationFrame(rafId);
      rafId = null;
      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
      updateCurrentLrc();
      rafId = requestAnimationFrame(renderMask);
    });
    aud.aud.addEventListener('ended', ()=>{
      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
      curIdx = -1;
      cancelAnimationFrame(rafId);
      rafId=null;
    });
    rafId = requestAnimationFrame(renderMask);
}

function updateCurrentLrc(){
    const nowSrc = aud.aud.src;
    let idx = 0;
    for(let i=0; i<options.urls.length; i++){
      if(options.urls === nowSrc){
            idx = i;
            break;
      }
    }
    lines = parseLines(songLrc);
    for(let i=0; i<lines.length; i++){
      lines.tEnd = (i+1 < lines.length) ? lines.t : (lines.t + 4);
    }
    curIdx = -1;
}

function renderMask(){
    if(!aud || !aud.aud) return;
    const t = aud.aud.currentTime;
    let i = curIdx;
    if(i<0 || t<lines.t || t>=lines.tEnd){
      for(i=lines.length-1; i>=0; i--){
            if(t>=lines.t) break;
      }
      if(i!==curIdx && i>=0){
            lyricEl.textContent = lines.txt;
            curIdx = i;
      }
      if(i<0){
            lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
                'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
            curIdx = -1;
      }
    }
    if(curIdx>=0){
      const seg = lines;
      const dur = Math.max(seg.tEnd - seg.t, 0.01);
      const p = Math.min(Math.max((t - seg.t)/dur, 0), 1);
      const percent = (p*100).toFixed(2)+'%';
      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            `linear-gradient(to right,#000 0%,#000 ${percent},transparent ${percent})`;
    }
    rafId = requestAnimationFrame(renderMask);
}
</script>

klxf 发表于 2026-9-1 18:00:31

好听好看，谢谢分享

醉美水芙蓉 发表于 2026-9-1 21:19:58

klxf 发表于 2026-9-1 18:00
好听好看，谢谢分享

谢谢友友光临！
页: [1]
查看完整版本: 等风来等花开