Synthetech

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/synn.webp') no-repeat center/cover; color: white; }
   
4.     .player { width: 480px; left: 100px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #msvg { position: absolute; width: 20vw; heighht: 20vw; transition: .75s; opacity: var(--opacity); left: 10%; }
   
7. </style>
   
8. 
   
9. <div id="pa" class="pa">
   
10.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2414777/00/02/13/5b514e39921d5.mp4" autoplay loop muted></video>
    
11.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
12.         <g id="g1" class="rot brightness">
    
13.             <title>播放/暂停(Alt+X)</title>
    
14.         </g>
    
15.     </svg>
    
16. </div>
    
17. 
    
18. <script>
    
19.     var options = {
    
20.         pa: '.pa',
    
21.         urls: [['https://music.163.com/song/media/outer/url?id=1371757762', '曲名']],
    
22.         btns: [msvg],
    
23.     };
    
24. 
    
25.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    
26.         loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js?v0', tzRun);
    
27.     });
    
28. 
    
29.     function tzRun() {
    
30.         var aud = new AudPlayer(options);
    
31.         var dr = _dr(msvg);
    
32.         dr.ellipse(0, 20, 120, 30, 'rgba(0,100,100, .25)').addTo(g1).rotates(9);
    
33.     }
    
34. 
    
35.     function loadJs(url, callback) {
    
36.         var script = document.createElement('script');
    
37.         script.charset = 'utf-8';
    
38.         script.src = url;
    
39.         script.onload = function() {
    
40.             if (callback) callback();
    
41.         };
    
42.         document.head.appendChild(script);
    
43.     }
    
44. </script>

复制代码

马黑黑

帖子没有什么新的东东，唯小播造型可能略为新鲜，核心代码在 32 行。

霜染枫丹

有时候在一个特定的画面，小播作用很大，不合适的时候看着就是不舒服。感谢马老师的分享，我先收藏在制作。

马黑黑

霜染枫丹 发表于 2026-5-26 21:08
有时候在一个特定的画面，小播作用很大，不合适的时候看着就是不舒服。感谢马老师的分享 ...

红影

旋转出来的图案总是漂亮的。
欣赏黑黑好帖

马黑黑

红影 发表于 2026-5-27 20:27
旋转出来的图案总是漂亮的。
欣赏黑黑好帖

谢谢

杨帆

马黑黑 发表于 2026-5-26 20:46
帖子没有什么新的东东，唯小播造型可能略为新鲜，核心代码在 32 行。

画面音乐，新颖别致。为何我这看不到小播呢？

马黑黑

杨帆 发表于 2026-5-27 21:49
画面音乐，新颖别致。为何我这看不到小播呢？

小播在左侧，鼠标移入帖子出现，移到小播高亮

杨帆

马黑黑 发表于 2026-5-27 22:29 小播在左侧，鼠标移入帖子出现，移到小播高亮

是，鼠标移入帖子出现进度条 但未显示小播，不知其因

马黑黑

杨帆 发表于 2026-5-27 22:44
本帖最后由 杨帆 于 2026-5-27 22:46 编辑

是，鼠标移入帖子出现进度条

你去这里看看有木有：

http://mhh.52qingyin.cn/art/bsho ... rt=mahei_1779801800

杨帆

马黑黑 发表于 2026-5-27 22:56
你去这里看看有木有：

http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1779801800

这里可以看到呀，什么原因？

马黑黑

杨帆 发表于 2026-5-27 23:01
这里可以看到呀，什么原因？

代码基本一样，就一个 CSS 变量值 --offsetX 不同而已。估计存在兼容性问题，或者是你的浏览器缓存（论坛部分）长时间未清理过产生了冗余

杨帆

马黑黑 发表于 2026-5-27 23:36
代码基本一样，就一个 CSS 变量值 --offsetX 不同而已。估计存在兼容性问题，或者是你的浏览器缓存（论坛 ...

知道了，谢谢老师

马黑黑

杨帆 发表于 2026-5-28 00:03
知道了，谢谢老师

小辣椒

这个和我前面做的那个好像差不多的，黑黑的播放器现在都是隐藏了，

小辣椒

这个可以套用玩一次的。

马黑黑

小辣椒 发表于 2026-5-30 22:28
这个可以套用玩一次的。