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
有时候在一个特定的画面，小播作用很大，不合适的时候看着就是不舒服。感谢马老师的分享 ...