梦江南 发表于 2026-6-18 14:40

学习黑黑老师的No Man's Land，端午送祝福


<meta charset="UTF-8">
<title></title>
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa {
      --offsetX: 81px;
      --bg: url('https://pan.suyanw.cn/view.php/daff0267726eccf95f595bb9a6a02907.jpg') no-repeat center/cover;
      color: white; border-radius:32px; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { mix-blend-mode: screen; opacity: 0.9; }
    #msvg {
      position: absolute;
      width: 12vw;
      height: 12vw;
      top: 10%;
      left: 10%;
      transition: .75s;
      opacity: 1;
      cursor: pointer;
    }
    #msvg polygon {
      stroke-dasharray: var(--len);
      stroke-dashoffset: var(--len);
      animation: draw 6s linear forwards;
    }
    @keyframes draw { to { stroke-dashoffset: 0; } }

    /* ========== 新增歌词样式 ========== */
    .lrc-wrap {
      position: absolute;
      width: 90%;
      max-width: 800px;
      height: 320px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -40%);
      overflow: hidden;
      text-align: center;
      pointer-events: none;
    }
    .lrc-box {
      transition: transform 0.4s ease-out;
    }
    .lrc-line {
      font: bold 42px 'Microsoft YaHei', sans-serif;
      color: rgba(255,255,255,0.4);
      letter-spacing: 2px;
      text-shadow: 0 0 2px #000, 2px 2px 8px #222;
      user-select: none;
      margin: 24px 0;
      transition: all 0.3s;
    }
    .lrc-line.active {
      color: #fff;
      font-size: 52px;
      text-shadow: 0 0 8px #0ff, 0 0 16px #fff;
    }
</style>
</head>
<body>
<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/20871177/00/17/21/5ebc02d5ed50e_10s_big.mp4" autoplay loop mutedborder-radius:32px; ></video>
    <!-- 歌词容器 -->
    <div class="lrc-wrap">
      <div class="lrc-box" id="lrcBox"></div>
    </div>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
      <title>播放/暂停(Alt+X)</title>
      <defs>
            <linearGradient id="grd">
                <stop offset="0" stop-color="white" />
                <stop offset="0.15" stop-color="cyan" />
                <stop offset="1" stop-color="tan" />
            </linearGradient>
      </defs>
      <g id="g1"></g>
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://pan.suyanw.cn/view.php/dbb64c751268d06ec3eef5fd2bab889c.mp3', 'no man\'s land']],
      btns: ,
    };

    //
    const lrcRaw = `祝端午节安康
LRC歌词编辑：梦江南
幽幽艾草香绵绵情意长
佳逢又端午我来送吉祥
祝你更年轻祝你财运旺
祝你的明天更灿烂辉煌
浓浓端午情淡淡酒飘香
粽香味飘满大街和小巷
人生最幸福你我都无恙
一家人围坐笑语声飞扬
一年一端午一岁一安康
和风细雨送来温馨时光
你编五彩线我包粽子忙
美丽的心情犹如花绽放
一年一端午一岁一安康
天南地北一片繁荣景象
小伙赛龙舟姑娘把歌唱
欣逢盛世谁不充满力量`;
    let lrcList = [];
    //
    function parseLRC(lrcStr) {
      const reg = /\[(\d{2}):(\d{2})\.(\d{3})\](.*)/;
      const lines = lrcStr.split('\n');
      lines.forEach(line => {
            const match = line.match(reg);
            if (!match) return;
            const min = Number(match);
            const sec = Number(match);
            const ms = Number(match);
            const time = min * 60 + sec + ms / 1000;
            const text = match.trim();
            lrcList.push({ time, text });
      });
      renderLrcDom();
    }
    //
    function renderLrcDom() {
      const box = document.getElementById('lrcBox');
      box.innerHTML = '';
      lrcList.forEach(item => {
            const div = document.createElement('div');
            div.className = 'lrc-line';
            div.dataset.time = item.time;
            div.innerText = item.text;
            box.appendChild(div);
      });
    }
    //
    function updateLrc(currentTime) {
      let activeIdx = 0;
      //
      for (let i = 0; i < lrcList.length; i++) {
            if (currentTime >= lrcList.time) {
                activeIdx = i;
            } else break;
      }
      const allLines = document.querySelectorAll('.lrc-line');
      allLines.forEach(line => line.classList.remove('active'));
      const activeLine = allLines;
      if (!activeLine) return;
      activeLine.classList.add('active');
      // 歌词滚动居中
      const box = document.getElementById('lrcBox');
      const wrapHeight = document.querySelector('.lrc-wrap').clientHeight;
      const lineTop = activeLine.offsetTop;
      const targetY = wrapHeight / 2 - lineTop - activeLine.offsetHeight / 2;
      box.style.transform = `translateY(${targetY}px)`;
    }

    //
    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }

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

    function tzRun() {
      //
      var aud = new AudPlayer(options);
      //
      parseLRC(lrcRaw);
      //
      aud.aud.addEventListener('timeupdate', () => {
            updateLrc(aud.aud.currentTime);
      });

      //
      var dr = _dr(msvg);
      var points = dr.sun(12, 200, 190);
      dr.polygon(points, 'none', 'purple', 1).set('fill-rule', 'evenodd').addTo('g1');
      var len = dr.elm.getTotalLength();
      dr.elm.style.setProperty('--len', len);
      dr.elm.onanimationend = () => {
            setTimeout(() => {
                dr.elm.setAttribute('fill', 'url(#grd)');
                g1.setAttribute('class', 'rotate');
            }, 1000);
      };
         }
   
</script>
</body>
</html>

梦江南 发表于 2026-6-18 14:54

鸣谢黑黑老师的No Man's Land代码。{:4_180:}

杨帆 发表于 2026-6-18 16:22

好听好看，祝江南端午安康{:4_204:}

也曾年轻 发表于 2026-6-18 16:33

https://q9.itc.cn/q_70/images03/20250531/d85f65e12f114d3997d658417388a9a0.gif

梦江南 发表于 2026-6-18 16:50

杨帆 发表于 2026-6-18 16:22
好听好看，祝江南端午安康

谢谢杨帆支持，祝端午安康！{:4_204:}

梦江南 发表于 2026-6-18 16:50

也曾年轻 发表于 2026-6-18 16:33


https://q9.itc.cn/q_70/images03/20250526/8d5c2a512b38403fa049771ee32235df.gif

马黑黑 发表于 2026-6-18 17:36

好帖，有粽子的味道

梦江南 发表于 2026-6-18 18:01

马黑黑 发表于 2026-6-18 17:36
好帖，有粽子的味道

黑黑老师傍晚嚎！谢谢支持鼓励！端午安康！{:4_204:}{:4_180:}

红影 发表于 2026-6-18 18:34

这个很契合端午内容，真好的帖子。欣赏江南好帖，端午安康{:4_187:}

梦江南 发表于 2026-6-18 18:38

红影 发表于 2026-6-18 18:34
这个很契合端午内容，真好的帖子。欣赏江南好帖，端午安康
问好影子，谢谢欣赏支持，端午安康！{:4_204:}{:4_180:}

樵歌 发表于 2026-6-18 20:47

非常应景哈，这歌可是第一次听懂呢！祝端午快乐！{:4_204:}

梦江南 发表于 2026-6-19 07:19

樵歌 发表于 2026-6-18 20:47
非常应景哈，这歌可是第一次听懂呢！祝端午快乐！

问好樵歌老师，这歌曲是从抖音上录制下来的。祝端午安康！{:4_204:}

马黑黑 发表于 2026-6-19 21:38

梦江南 发表于 2026-6-18 16:50


{:4_191:}

梦江南 发表于 2026-6-20 08:01

马黑黑 发表于 2026-6-19 21:38


黑黑老师，早上嚎！{:4_204:}

马黑黑 发表于 2026-6-20 11:09

梦江南 发表于 2026-6-20 08:01
黑黑老师，早上嚎！

上午嚎

梦江南 发表于 2026-6-20 11:29

马黑黑 发表于 2026-6-20 11:09
上午嚎

黑黑老师，中午嚎！{:4_190:}

马黑黑 发表于 2026-6-20 12:16

梦江南 发表于 2026-6-20 11:29
黑黑老师，中午嚎！

都嚎都嚎

梦江南 发表于 2026-6-20 12:39

马黑黑 发表于 2026-6-20 12:16
都嚎都嚎

谢谢{:4_180:}

马黑黑 发表于 2026-6-20 18:28

梦江南 发表于 2026-6-20 12:39
谢谢

谢嚎

梦江南 发表于 2026-6-21 07:52

马黑黑 发表于 2026-6-20 18:28
谢嚎

早上嚎！今天父亲节，祝黑黑老师父亲节快乐！{:4_204:}
页: [1] 2
查看完整版本: 学习黑黑老师的No Man's Land，端午送祝福