论坛 › 动画音画 › 知为谁

马黑黑 发表于 2026-6-21 18:27

知为谁

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/vwu.jpg') no-repeat center/cover; color: white; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { mix-blend-mode: screen; opacity: 1; }
    #msvg { position: absolute; width: 12vw; height: 12vw; top: 10%; transition: .75s; opacity: 1; border-radius: 50%; cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 var(--shadow-offset) 0 rgba(0,0,0,.75)); --shadow-offset: clamp(340px, 58vh, 800px); }
    .path{ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw linear 6s forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/15653652/01/12/35/6193af432daf8.mp4" autoplay loop muted></video>
    <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="cyan" />
                <stop offset="70%" stop-color="tan" />
            </linearGradient>
      </defs>
      <g id="g1"></g>
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=1336994546', '知为谁']],
      btns: ,
    };

    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);
      var dr = _dr(msvg);
      var vertex1 = dr.circlePoints(26, 200, 180);
      var vertex2 = dr.circlePoints(26, 200, 160);
      var path = 'M', p0;
      for (var i = 0; i < vertex1.length; i++) {
            var v1 = vertex1.join(',');
            if (i === 0) p0 = v1;
            const v2 = vertex2.join(',');
            path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
      };
      path += p0 + 'L120 0 A120 120,0 0 0,-120 0 A120 120, 1 0 0, 120 0';
      dr.path(path).set('class', 'path').addTo(g1);
      dr.elm.style.setProperty('--len', dr.elm.getTotalLength());
      dr.elm.onanimationend = () => {
            dr.elm.setAttribute('fill', 'url(#grd)');
            setTimeout(() => g1.classList.add('rot'), 300);
      };
    }

    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-6-21 18:27

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/vwu.jpg') no-repeat center/cover; color: white; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { mix-blend-mode: screen; opacity: 1; }
    #msvg { position: absolute; width: 12vw; height: 12vw; top: 10%; transition: .75s; opacity: 1; border-radius: 50%; cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 var(--shadow-offset) 0 rgba(0,0,0,.75)); --shadow-offset: clamp(340px, 50vh, 800px); }
    .path{ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw linear 6s forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/15653652/01/12/35/6193af432daf8.mp4" autoplay loop muted></video>
    <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="cyan" />
                <stop offset="70%" stop-color="tan" />
            </linearGradient>
      </defs>
      <g id="g1"></g>
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=1336994546', '知为谁']],
      btns: ,
    };

    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);
      var dr = _dr(msvg);
      var vertex1 = dr.circlePoints(26, 200, 180);
      var vertex2 = dr.circlePoints(26, 200, 160);
      var path = 'M', p0;
      for (var i = 0; i < vertex1.length; i++) {
            var v1 = vertex1.join(',');
            if (i === 0) p0 = v1;
            const v2 = vertex2.join(',');
            path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
      };
      path += p0 + 'L120 0 A120 120,0 0 0,-120 0 A120 120, 1 0 0, 120 0';
      dr.path(path).set('class', 'path').addTo(g1);
      dr.elm.style.setProperty('--len', dr.elm.getTotalLength());
      dr.elm.onanimationend = () => {
            dr.elm.setAttribute('fill', 'url(#grd)');
            setTimeout(() => g1.classList.add('rot'), 300);
      };
    }

    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-6-21 18:31

辅助小播阴影：

辅助小播使用 svgdr 绘制，结合CSS实现关键帧动画，包括绘制过程和绘制完成后的旋转。而其中的阴影投递，是在 SVG 主元素 #msvg 选择其中利用 filter 滤镜属性的 drop-shadow 函数实现，阴影的垂直距离使用 clamp 函数做了个大概的规范，但没有测试过不同显示设备尺寸的适配情况（也许不理想）。

红影 发表于 2026-6-21 19:34

马黑黑 发表于 2026-6-21 18:31
辅助小播阴影：

辅助小播使用 svgdr 绘制，结合CSS实现关键帧动画，包括绘制过程和绘制完成后的旋转。而 ...

小播阴影真好，和背景图里山的倒影相映成趣，我这里看的阴影垂直距离正好呢{:4_187:}

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

红影 发表于 2026-6-21 19:34
小播阴影真好，和背景图里山的倒影相映成趣，我这里看的阴影垂直距离正好呢

阴影的设置源于背景图片的特点。至于阴影的垂直距离合不合适，需要看显示设备尺寸

朵拉 发表于 2026-6-21 20:16

老师创意十足，学生已交作业，请您指正{:4_190:}

红影 发表于 2026-6-21 21:25

马黑黑 发表于 2026-6-21 19:57
阴影的设置源于背景图片的特点。至于阴影的垂直距离合不合适，需要看显示设备尺寸

嗯嗯，这些都需要综合考虑{:4_204:}

杨帆 发表于 2026-6-22 15:54

马黑黑 发表于 2026-6-21 18:31
辅助小播阴影：

辅助小播使用 svgdr 绘制，结合CSS实现关键帧动画，包括绘制过程和绘制完成后的旋转。而 ...

自然的小播阴影，一流的展示效果，谢谢马老师精彩示范{:4_180:}

玫瑰 发表于 2026-6-22 19:04

精彩的分享。{:4_191:}

马黑黑 发表于 2026-6-22 19:16

玫瑰 发表于 2026-6-22 19:04
精彩的分享。

晚上嚎

马黑黑 发表于 2026-6-22 19:17

杨帆 发表于 2026-6-22 15:54
自然的小播阴影，一流的展示效果，谢谢马老师精彩示范

{:4_191:}

马黑黑 发表于 2026-6-22 19:17

红影 发表于 2026-6-21 21:25
嗯嗯，这些都需要综合考虑

必须的

马黑黑 发表于 2026-6-22 19:17

朵拉 发表于 2026-6-21 20:16
老师创意十足，学生已交作业，请您指正

{:4_199:}

玫瑰 发表于 2026-6-22 19:19

本帖最后由 玫瑰 于 2026-6-22 21:21 编辑

马黑黑 发表于 2026-6-22 19:16
晚上嚎
你的代码精彩。{:4_187:}

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

玫瑰 发表于 2026-6-22 19:19
我的代码精彩。

{:4_181:}

玫瑰 发表于 2026-6-22 21:22

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


错字了，我改你{:4_173:}

马黑黑 发表于 2026-6-23 13:18

玫瑰 发表于 2026-6-22 21:22
错字了，我改你

你改我可以，我改你不行{:4_170:}

梦江南 发表于 2026-6-23 15:23

又是一个非常完美漂亮的播放器。黑黑老师辛苦了！{:4_190:}

马黑黑 发表于 2026-6-23 20:35

梦江南 发表于 2026-6-23 15:23
又是一个非常完美漂亮的播放器。黑黑老师辛苦了！

手掌辛苦！

红影 发表于 2026-6-24 13:18

马黑黑 发表于 2026-6-22 19:17
必须的

这个帖子里的阴影效果特别好{:4_187:}

查看完整版本: 知为谁