论坛 › 欢乐水吧 › 好想醉一回 （ 套用学习黑黑标题字高光游移 效果）

小辣椒 发表于 2026-9-1 21:55

好想醉一回 （ 套用学习黑黑标题字高光游移 效果）

<meta charset="UTF-8">
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   .pa {--offsetX: 100px; --bg: url(' ') no-repeat center/cover;margin: 130px 0; width: 1600px; height: 870px;}
    .bg-gif{
      position:absolute;
      width:100%;
      height:100%;
      background:url('https://wj.zp68.com/lxx/yunhua/2026/09/01/3F.gif') no-repeat center/cover;
      top:0;
      left:0;
      opacity:1;
    }
    .bg-static{
      position:absolute;
      width:100%;
      height:100%;
      background:url('https://wj.zp68.com/lxx/yunhua/2026/09/01/3F.jpg') no-repeat center/cover;
      top:0;
      left:0;
      opacity:0;
    }
    .player { width: 480px; bottom: 40px; }
    .btnFs { top: -125px; right: 20px; }
    .tit {
      position: absolute;
      top: 6%;
      width: 100%;
      height: 80px;
      display: grid;
      place-items: center;
      font-size: 2.2vw;
      font-weight: bold;
      color: rgba(200,200,200,.5);
      cursor: pointer;
      transform-style: preserve-3d;
      z-index:10;
    }
    .tit::before, .tit::after {
      content: '好想醉一回';
      position: absolute;
      background: linear-gradient(90deg, #b2e3f3, #b2e3f3, #b2e3f3) no-repeat 0 0 / 35% 100%;
      background-clip: text;
      -webkit-background-clip: text;
      filter: drop-shadow(-1px -1px 2px black);
      transform: rotateX(0);
      backface-visibility: hidden;
      transition: 1s;
      animation: bmove 8s linear infinite alternate;
      animation-play-state: running;
    }
    .tit.pause-anim::before,.tit.pause-anim::after{
      animation-play-state: paused;
    }
    .tit::after {
      content: '歌手：马健涛 & 真露 ';
      transform: rotateX(-180deg);
    }
    .tit:hover::before { transform: rotateX(180deg); }
    .tit:hover::after { transform: rotateX(0); }
    @keyframes bmove { to { background-position: 100% 100%; } }
    #lyric {
      position: absolute;
      top: 84%;
      left: 50%;
      transform: translateX(-50%);
      font: bold 1.8vw Microsoft YaHei, sans-serif;
      white-space: nowrap;
      pointer-events: none;
      z-index:10;
      color: rgba(255,255,255,0.3);
      background: linear-gradient(90deg, #7fa1ac 0%, #7fa1ac 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%);
    }
</style>
<div id="pa" class="pa">
    <div class="bg-gif"></div>
    <div class="bg-static"></div>
    <div id="tit" class="tit"></div>
    <div id="lyric"></div>
</div>
<script>
var options = {
    pa: '.pa',
    urls: [['https://wj.zp68.com/lxx/yunhua/2026/09/01/01.mp3', '好想醉一回']],
    btns: ,
};
const songLrc = [
`《好想醉一回》      
歌手：马健涛 &真露
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
为何这人间疲惫
都让我一个人背
为何这世间酸楚
都让我一人承受
白天人前装笑颜
夜晚泪水却流干
今夜拿酒杯作伴
对酒讲我的心酸
我的心好酸
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
酷咔音乐kkmp3.com
白天人前装笑颜
夜晚泪水却流干
今夜拿酒杯作伴
对酒讲我的心酸
我的心好酸
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
找个没人的地方
痛快哭一回
谢谢欣赏
`,
];
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 titEl = document.getElementById('tit');
let bgGif = document.querySelector('.bg-gif');
let bgStatic = document.querySelector('.bg-static');
let curIdx = -1;
let rafId = null;
let lines = [];
function loadJs(u,cb){
    var s=document.createElement('script');
    s.charset = 'utf-8';// 关键修复 加上这一行
    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', () => {
      titEl.classList.remove('pause-anim');
      bgStatic.style.opacity = '0';
      if(!rafId) rafId = requestAnimationFrame(renderMask);
    });
    aud.aud.addEventListener('pause', () => {
      titEl.classList.add('pause-anim');
      bgStatic.style.opacity = '1';
      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%)';
      titEl.classList.add('pause-anim');
      bgStatic.style.opacity = '1';
      curIdx = -1;
      cancelAnimationFrame(rafId);
      rafId=null;
    });
}
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>

小辣椒 发表于 2026-9-1 21:57

很奇怪 我电脑预览是好的，发论坛全屏欣赏和标题字停止文字都是乱码了。播放器颜色也是变了。

@马黑黑

小辣椒 发表于 2026-9-1 21:57

黑黑是不是我加了动图一键停止的原因？

小辣椒 发表于 2026-9-1 21:58

我也是郁闷，一直解决不了这个问题，前面那个作业也是这个问题

小辣椒 发表于 2026-9-1 21:59

这次我把高光游移也是同步一键停止了，是不是我画蛇添足了？

杨帆 发表于 2026-9-1 23:39

我这看，非全屏效果正常呀

马黑黑 发表于 2026-9-1 23:59

小辣椒 发表于 2026-9-1 21:57
很奇怪 我电脑预览是好的，发论坛全屏欣赏和标题字停止文字都是乱码了。播放器颜色也是变了。

@马黑黑

首先，按 F11 切换全屏、正常模式，并无异常，没有乱码。你说有乱码，可能和你的浏览器缓存有关，你可以试着“硬刷新（Ctrl+F5)+软刷新(F5)”组合试试查看效果，如果还是乱码，清除浏览器缓存再试，还是乱码的话，试着更新浏览器到最新版本。

其次，播放器颜色问题。这和你柔和了多种实现机制有关联，需要你能明晰哪儿跟哪儿，否则一切都难以操控。

马黑黑 发表于 2026-9-2 00:00

杨帆 发表于 2026-9-1 23:39
我这看，非全屏效果正常呀

小辣椒没有提供全屏按钮，但全屏功能尚在，按 F11 可以进入全屏，也未发现异常

马黑黑 发表于 2026-9-2 00:01

小辣椒 发表于 2026-9-1 21:59
这次我把高光游移也是同步一键停止了，是不是我画蛇添足了？

这个仅仅是通过 --state 变量来管理，不会引发问题

马黑黑 发表于 2026-9-2 00:01

小辣椒 发表于 2026-9-1 21:57
黑黑是不是我加了动图一键停止的原因？

未发现代码模块之间有冲突

马黑黑 发表于 2026-9-2 00:04

小辣椒 发表于 2026-9-1 21:58
我也是郁闷，一直解决不了这个问题，前面那个作业也是这个问题

LRC模块，不建议使用独立的代码，原因：代码量大，容易干扰对代码的维护。

前面给你的模板是做原生LRC歌词最好的模块。可以在此模块基础上修改部分内容，例如你不想要 SVG，就去掉SVG标签和JS对应模块；想加图就加图。

杨帆 发表于 2026-9-2 08:43

马黑黑 发表于 2026-9-2 00:00
小辣椒没有提供全屏按钮，但全屏功能尚在，按 F11 可以进入全屏，也未发现异常

刚试了一下，按 F11 可切换全屏、正常模式，谢谢马老师指导{:4_190:}

杨帆 发表于 2026-9-2 08:45

本帖最后由 杨帆 于 2026-9-2 08:46 编辑

马黑黑 发表于 2026-9-2 00:04
LRC模块，不建议使用独立的代码，原因：代码量大，容易干扰对代码的维护。

前面给你的模板是做原生LRC ...
请教马老师：做原生LRC歌词最好的模块具体指哪个模版？谢谢{:4_190:}

梦江南 发表于 2026-9-2 09:09

杨帆 发表于 2026-9-2 08:45
请教马老师：做原生LRC歌词最好的模块具体指哪个模版？谢谢

杨帆问的这个问题也是我想问的。请教黑黑老师！{:4_180:}

梦江南 发表于 2026-9-2 09:38

视频打开很顺利，效果惊艳。欣赏点赞！{:4_187:}

梦江南 发表于 2026-9-2 09:39

谢谢小辣椒带来的精彩音画。动感十足！{:4_204:}

红影 发表于 2026-9-2 10:38

制作很漂亮啊，制作精美，欣赏亲爱的好帖{:4_199:}

风雨梦 发表于 2026-9-2 12:47

好帖劲赏{:4_199:}

梦江南 发表于 2026-9-2 16:36

马黑黑 发表于 2026-9-1 23:59
首先，按 F11 切换全屏、正常模式，并无异常，没有乱码。你说有乱码，可能和你的浏览器缓存有关，你可以 ...

黑黑老师，在点标题字时文字下面能看到几个看不懂的文字，这是乱码。

小九 发表于 2026-9-2 17:32

醉吧醉吧，放松一下。这歌很好听呢{:4_187:}

查看完整版本: 好想醉一回 （ 套用学习黑黑标题字高光游移 效果）