论坛 › 欢乐水吧 › 黄 昏 晓（学习马黑黑生命线效果）

朵拉 发表于 2026-8-16 23:11

黄 昏 晓（学习马黑黑生命线效果）

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://pan.suyanw.cn/view.php/08442dbcd7e901b318ee6182ff02d901.jpg') no-repeat center/cover; color: purple; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #msvg { position: absolute; bottom: 50px; width: 16vw; height: 8vw; cursor: pointer; opacity: 1; }
    #p1 { fill: none; stroke: currentColor; stroke-width: 8; stroke-dasharray: 8; stroke-dashoffset: 100%; animation: move linear 20s infinite; }
    @keyframes move { to { stroke-dashoffset: 0%; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/17/5e1c837dca409.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
      <title>播放/暂停(Alt+X)</title>
      <path id="p1" d="M0 100 H400" />
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3374306953', '黄昏晓']],
      btns: ,
    };

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

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

      aud.aud.ontimeupdate = () => {
            var tt = 15;
            var str = '';
            Array.from({length: tt}).forEach((_,k) => {
                var x = (k + 1) * (360 / tt);
                var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
                str += k === 0 ? `M0 100 H${x}` : ` L${x} ${y}`;
            });
            path = `${str}L400 100`;
            p1.setAttribute('d', path);
      };
    }

    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);
    }
</script>

朵拉 发表于 2026-8-16 23:12

@马黑黑
老师 晚上好，学生交作业，请您指正{:4_190:}

小九 发表于 2026-8-17 09:57

这个特效很好看，有氛围感{:4_187:}

红影 发表于 2026-8-17 14:18

制作很漂亮。欣赏朵宝好帖{:4_187:}

小辣椒 发表于 2026-8-17 22:23

欣赏朵拉精彩的制作{:4_199:}

马黑黑 发表于 2026-8-18 07:35

朵拉 发表于 2026-8-16 23:12
@马黑黑
老师 晚上好，学生交作业，请您指正

{:4_190:}

马黑黑 发表于 2026-8-18 07:39

.pa 选择器的 color 可以考虑使用浅白色或浅黄色、浅绿色，以提升播放器、曲线图案的辨析度。

另外，如果不想通过 currentColor 设置播放器、辅助播放器的主体颜色，可以将该颜色设置为实体颜色

查看完整版本: 黄 昏 晓（学习马黑黑生命线效果）