朵拉 发表于 2026-7-26 22:19

如果的事（学习马黑黑机械效果）

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://pan.suyanw.cn/view.php/cb3899eab9e0872d51dcd83986a3782d.jpg') no-repeat center/cover; color: rgba(0,0,0,.1); }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #msvg { position: absolute; width: 12vw; heighht: 12vw; transition: .75s; opacity: 1; }
    #msvg path { fill-rule: evenodd; animation: draw 6s linear forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
    <svg id="msvg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3392879259', '如果的事']],
      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);
      const vertex1 = dr.circlePoints(26, 200, 180);
      const vertex2 = dr.circlePoints(26, 200, 160);
      let path = 'M';
      for (let i = 0; i < vertex1.length; i++) {
            const v1 = (i > 0 ? 'L' : '') + vertex1.join(',');
            const v2 = (i > 0 ? 'L' : '') + vertex2.join(',');
            path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
      };
      var beginPos = vertex1;
      path += `L${vertex1.join(',')},120 0 A1 1,0 1 1,-120 0 A1 1,0 1 1, 120 0L${vertex1.join(',')}`;
      dr.path(path, 'none', 'currentColor', 4).sets({'stroke-dasharray': dr.elm.getTotalLength(), 'stroke-dashoffset': dr.elm.getTotalLength()});
      dr.elm.onanimationend = () => {
            dr.elm.setAttribute('fill', 'currentColor');
            dr.elm.style.animation = 'rot 8s linear infinite var(--state)';
      };
    }

    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-7-26 22:19

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

宕.. 发表于 2026-7-26 22:47

不知为什么，我电脑可以听到音乐，看不到图，两个模式切换也看不到，手机却能看到！

马黑黑 发表于 2026-7-26 23:45

朵拉 发表于 2026-7-26 22:19
@马黑黑
老师 晚上好，学生交作业，请指正

{:4_199:}

马黑黑 发表于 2026-7-26 23:49

宕.. 发表于 2026-7-26 22:47
不知为什么，我电脑可以听到音乐，看不到图，两个模式切换也看不到，手机却能看到！

浏览器版本过低。帖子代码使用最新规范，需要相对新一点的浏览器支持。Edge、火狐、Chrome 都可以，IE 或 IE 封装的不行。国内浏览器有很多是可以的，例如百分浏览器（centbrowser）、小智双核浏览器、夸克浏览器以及一系列的AI浏览器（比如千问、豆包自带的浏览器、Tabbit Browser等等都可以）

红影 发表于 2026-7-27 10:55

这个播放器的位置貌似不太好么，在人物鼻子下。貌似可以稍微调整一下。
欣赏朵宝好帖{:4_204:}

宕.. 发表于 2026-7-27 22:23

马黑黑 发表于 2026-7-26 23:49
浏览器版本过低。帖子代码使用最新规范，需要相对新一点的浏览器支持。Edge、火狐、Chrome 都可以，IE 或 ...

啊，你说这几个我都没用过，就是一个360糊弄到现在{:5_106:}

马黑黑 发表于 2026-7-28 21:24

宕.. 发表于 2026-7-27 22:23
啊，你说这几个我都没用过，就是一个360糊弄到现在

360的话，浏览器仅可以考虑极速版，它是干净的

宕.. 发表于 2026-7-29 21:05

马黑黑 发表于 2026-7-28 21:24
360的话，浏览器仅可以考虑极速版，它是干净的

是的哩，360也只有极速版好用，关键我技术盲，有啥且用啥了

马黑黑 发表于 2026-7-29 21:25

宕.. 发表于 2026-7-29 21:05
是的哩，360也只有极速版好用，关键我技术盲，有啥且用啥了

360安全浏览器有两个方面需要留意：

一、它会在你不经意间安装它的亲戚；

二、出于安全考虑，它对封装的浏览器内核 webKit 做很多限制，导致致使版本高也会对通用标准支持度下降甚至不支持。

宕.. 发表于 2026-7-29 22:06

马黑黑 发表于 2026-7-29 21:25
360安全浏览器有两个方面需要留意：

一、它会在你不经意间安装它的亲戚；


昂，那岂不是明目张胆耍牛氓么{:5_106:}

马黑黑 发表于 2026-7-30 21:30

宕.. 发表于 2026-7-29 22:06
昂，那岂不是明目张胆耍牛氓么

360就是牛呀，本性

宕.. 发表于 2026-7-30 22:06

马黑黑 发表于 2026-7-30 21:30
360就是牛呀，本性

哈哈，费斯开大，不过我无奈也要用它，还真X不起它{:5_117:}

宕.. 发表于 2026-7-30 22:10

雨夜听歌曲真舒服，手机看了图，温柔的歌声里尽显图素的静谧之美
特效很棒，习作亦为成品了哇。

马黑黑 发表于 2026-7-31 08:07

宕.. 发表于 2026-7-30 22:06
哈哈，费斯开大，不过我无奈也要用它，还真X不起它

360都惊动到了白宫，还有，日本人也被严严实实的治了一回

宕.. 发表于 2026-7-31 17:25

马黑黑 发表于 2026-7-31 08:07
360都惊动到了白宫，还有，日本人也被严严实实的治了一回

嗯哼？这就有点特别ne啊，那我还矫情啥哩{:5_106:}

梦江南 发表于 2026-7-31 20:13

欣赏朵拉漂亮的作品。{:4_204:}
页: [1]
查看完整版本: 如果的事（学习马黑黑机械效果）