这个也可以瞧瞧

马黑黑

马黑黑

代码

1. <style>
   
2. #mplayer {
   
3.         --state: running;
   
4.         margin: 50px auto;
   
5.         width: 120px;
   
6.         height: 120px;
   
7.         position: relative;
   
8.         display: grid;
   
9.         place-items: center;
   
10. }
    
11. .ball {
    
12.         position: absolute;
    
13.         width: 15px;
    
14.         height: 15px;
    
15.         border-radius: 50%;
    
16.         box-shadow: -5px 0 10px black inset;
    
17. }
    
18. @keyframes flash { to { box-shadow: 0 0 60px 20px gray, -2px -2px 8px snow inset; } }
    
19. </style>
    
20. 
    
21. <div id="mplayer"></div>
    
22. 
    
23. <script>
    
24. let total = 18;
    
25. for(let i = 0; i < total; i ++) {
    
26.         let ball = document.createElement('span');
    
27.         ball.className = 'ball';
    
28.         ball.style.cssText += `
    
29.                 transform: rotate(${360/total*i}deg) translate(60px);
    
30.                 animation: flash ${Math.random()+0.1}s infinite alternate var(--state);
    
31.         `;
    
32.         mplayer.appendChild(ball);
    
33. }
    
34. </script>

复制代码

红影

用阴影的变化尽然可以做出这么多漂亮的效果，真棒

庶民

创意无限，精彩不断。

马黑黑

醉美水芙蓉 发表于 2023-3-1 07:07
不会制作，就瞧瞧老师的作品吧！

早

马黑黑

红影 发表于 2023-2-28 23:25
用阴影的变化尽然可以做出这么多漂亮的效果，真棒

早上好

马黑黑

庶民 发表于 2023-3-1 04:54
创意无限，精彩不断。

手链过去制作过，是纯手链，这个加了特效

樵歌

脑洞大开，

马黑黑

樵歌 发表于 2023-3-1 11:08
脑洞大开，

补补

红影

马黑黑 发表于 2023-3-1 07:37
早上好

我试着用这个做播放器，去加歌词，然后发现这个效果出不来了

马黑黑

红影 发表于 2023-3-1 17:00
我试着用这个做播放器，去加歌词，然后发现这个效果出不来了

那是肯定那里出错了

红影

马黑黑 发表于 2023-3-1 18:16
那是肯定那里出错了

我用了手链的那个封装，这个只当作是动态效果，然后要么就是只能一直动，要么不动，不知道怎么样让它跟音乐关联起来。我看ball在JS里貌似跟音乐是关联的啊，不知道为什么自己去试就不行。

樵歌

马黑黑 发表于 2023-3-1 12:09
补补

补天的

马黑黑

樵歌 发表于 2023-3-1 21:38
补天的

七色石可以补补

马黑黑

红影 发表于 2023-3-1 20:18
我用了手链的那个封装，这个只当作是动态效果，然后要么就是只能一直动，要么不动，不知道怎么样让它跟音 ...

transform的东东，每个元素要前后都有，少一个多一个都动不了，它很挑剔。简言之，元素里有过 transform 的任何一个属性，后面的都要跟着有

庶民

马黑黑 发表于 2023-3-1 07:37
手链过去制作过，是纯手链，这个加了特效

用灵感制作快乐

红影

马黑黑 发表于 2023-3-1 21:44
transform的东东，每个元素要前后都有，少一个多一个都动不了，它很挑剔。简言之，元素里有过 transform  ...

我明白了，我一直在css里折腾，实际JS里也要配套才行。现在终于能跟着播放器的点击一起暂停或播放了。谢谢黑黑

马黑黑

红影 发表于 2023-3-2 09:57
我明白了，我一直在css里折腾，实际JS里也要配套才行。现在终于能跟着播放器的点击一起暂停或播放了。谢 ...

马黑黑

庶民 发表于 2023-3-2 05:14
用灵感制作快乐

没错