银河轨道

马黑黑

马黑黑

帖子代码

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/yhgd.webp') no-repeat center/cover; color: lightblue; perspective: 1000px; }
   
4.     .son { position: absolute; inset: 0; transform-style: preserve-3d; }
   
5.     .player { width: 480px; bottom: 10px; }
   
6.     .btnFs { top: 25px; right: 20px; }
   
7.     .mpic { width: 128px; height: 128px; offset-path: ellipse(30% 20% at 50% 30%); cursor: pointer; filter: drop-shadow(2px 2px 30px white); animation: offset-distance 15s linear var(--delay) infinite var(--state), move 200s linear infinite alternate var(--state);  --delay: 0s; }
   
8.     .mpic:nth-of-type(2) { --delay: -3s; }
   
9.     .mpic:nth-of-type(3) { --delay: -6s; }
   
10.     .mpic:nth-of-type(4) { --delay: -9s; }
    
11.     .mpic:nth-of-type(5) { --delay: -12s; }
    
12.     @keyframes move {
    
13.         from { transform: translateZ(-3000px); }
    
14.         to { transform: translateZ(0); }
    
15.     }
    
16. </style>
    
17. 
    
18. <div id="pa" class="pa">
    
19.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/02/01/5b4eedab469ff.mp4" autoplay loop muted></video>
    
20.     <div class="son">
    
21.         <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b1.webp" alt="" />
    
22.         <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b2.webp" alt="" />
    
23.         <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b3.webp" alt="" />
    
24.         <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b4.webp" alt="" />
    
25.         <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b5.webp" alt="" />
    
26.     </div>
    
27. </div>
    
28. 
    
29. <script>
    
30.     var pics = document.querySelectorAll('.mpic');
    
31.     var options = {
    
32.         pa: '.pa',
    
33.         urls: [['https://music.163.com/song/media/outer/url?id=417247510', '银河轨道']],
    
34.         btns: [...pics],
    
35.     };
    
36. 
    
37.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v1', tzRun);
    
38. 
    
39.     function tzRun() {
    
40.         var aud = new AudPlayer(options);
    
41.     }
    
42. 
    
43.     function loadJs(url, callback) {
    
44.         var script = document.createElement('script');
    
45.         script.charset = 'utf-8';
    
46.         script.src = url;
    
47.         script.onload = function() {
    
48.             if (callback) callback();
    
49.         };
    
50.         document.head.appendChild(script);
    
51.     }
    
52. </script>

复制代码

杨帆

不知什么原因，我这看到的背景是静图呀

马黑黑

杨帆 发表于 2026-8-8 13:27
不知什么原因，我这看到的背景是静图呀

帖子背景不动，静止状态。小球做椭圆轨道运动并做3d Z轴上的位置转换。

玫瑰

精彩的分享，音乐动感！

玫瑰

来个同题学习

杨帆

马黑黑 发表于 2026-8-8 13:30
帖子背景不动，静止状态。小球做椭圆轨道运动并做3d Z轴上的位置转换。

哇~设计初衷是这样的呀，谢谢马老师精彩示范

梦江南

震撼！

霜染枫丹

这个马老师下午好！很别出心裁的设计，创意恢宏，步骤很精细，赞佩！！