三人行

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2026/srx.webp') no-repeat center/cover; color: lightblue; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #player2 { bottom: 8%; width: 12vw; height: 8vw; cursor: pointer; transform: rotateX(45deg);  position: absolute; }
   
7.     .ball { width: 30px; height: 30px; background: lightblue; border-radius: 55%; offset-path: ellipse(50% 33.3%); offset-distance: 0%; animation: circle 6s linear infinite var(--state); }
   
8.     .ball:nth-of-type(2) { background: tan; animation-delay: -2s; }
   
9.     .ball:nth-of-type(3) { background: teal; animation-delay: -4s; }
   
10.     @keyframes circle { to { offset-distance: 100%; } }
    
11. </style>
    
12. 
    
13. <div id="pa" class="pa">
    
14.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay loop muted></video>
    
15.     <div id="player2">
    
16.         <div class="ball"></div>
    
17.         <div class="ball"></div>
    
18.         <div class="ball"></div>
    
19.     </div>
    
20. </div>
    
21. 
    
22. <script>
    
23.     var options = {
    
24.         pa: '.pa',
    
25.         urls: [['https://music.163.com/song/media/outer/url?id=3389281646', '三人行']],
    
26.         btns: [player2],
    
27.     };
    
28. 
    
29.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
30.         loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', tzRun());
    
31.     });
    
32. 
    
33.     function tzRun() {
    
34.         var aud = new AudPlayer(options);
    
35.     }
    
36. 
    
37.     function loadJs(url, callback) {
    
38.         var script = document.createElement('script');
    
39.         script.charset = 'utf-8';
    
40.         script.src = url;
    
41.         script.onload = function() {
    
42.             if (callback) callback();
    
43.         };
    
44.         document.head.appendChild(script);
    
45.     }
    
46. </script>

复制代码

马黑黑

辅助小播：

        #player2 选择器（代码06行）对应的 div 元素（代码15~19行）带 3 个子元素，class="ball"。这 3 个子元素运行 circle 关键帧动画，有时间差，因此分布在椭圆圆周不同的位置。动画是相抵路径动画，offset-path 已经支持 SVG 形状（圆、矩形等），还有射线（ray）。容器元素在X轴做一些倾斜，以适配视频图案。

姚云裳

很有创意的特效，欣赏并学习

马黑黑

姚云裳 发表于 2026-7-24 20:01
很有创意的特效，欣赏并学习

晚上好！

杨帆

富有创意，意境深远，谢谢马老师精彩示范

马黑黑

杨帆 发表于 2026-7-24 20:09
富有创意，意境深远，谢谢马老师精彩示范

红影

用这些小球做播放器，和背景视频十分相符，漂亮