这个用来干啥好

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 100px auto;
   
4.         width: 200px;
   
5.         height: 200px;
   
6.         border-radius: 50%;
   
7.         box-shadow: 4px 8px 28px gray, inset 0 0 160px lightblue;
   
8.         background: lightgreen;
   
9.         display: grid;
   
10.         place-items: center;
    
11.         position: relative;
    
12. }
    
13. li-zi {
    
14.         position: absolute;
    
15.         width: 20px;
    
16.         height: 20px;
    
17.         border-radius: 50%;
    
18.         background: navy;
    
19.         opacity: .95;
    
20.         animation: moving var(--duration) var(--delay) linear infinite alternate;
    
21. }
    
22. @keyframes moving {
    
23.         from { transform: translate(0,0); }
    
24.         to { transform: translate(var(--xx),var(--yy)); }
    
25. }
    
26. </style>
    
27. 
    
28. <div id="mydiv"></div>
    
29. 
    
30. <script>
    
31. let r = mydiv.offsetWidth / 2 - 10, total = 30;
    
32. Array.from({length: total}).forEach((item,key) => {
    
33.         let rad = (Math.PI / 180) * 360 / total;
    
34.         item = document.createElement('li-zi');
    
35.         item.style.cssText += `
    
36.                 --xx: ${r * Math.cos(rad * key)}px;
    
37.                 --yy: ${r * Math.sin(rad * key)}px;
    
38.                 --duration: ${2 + Math.random() * 3}s;
    
39.                 --delay: -${Math.random() * 5}s;
    
40.                 background: #${Math.random().toString(16).substr(-6)};
    
41.         `;
    
42.         mydiv.appendChild(item);
    
43. });
    
44. </script>

复制代码

马黑黑

母球放大就没那么好看，看看谁帮忙设计一下CSS的box-shadow，让母球较大时也那么好看

红影

好玩，粒子碰撞

红影

马黑黑 发表于 2023-12-23 14:09
母球放大就没那么好看，看看谁帮忙设计一下CSS的box-shadow，让母球较大时也那么好看

现在的就挺好看啊，像有立体感似的

梦油

好漂亮哎！我看这个是不是可以开发游戏软件啊？

红影

等翻页了我试个放大的，现在无法试，怕冲突主帖

马黑黑

红影 发表于 2023-12-23 14:34
好玩，粒子碰撞

马黑黑

梦油 发表于 2023-12-23 14:59
好漂亮哎！我看这个是不是可以开发游戏软件啊？

木有，和游戏没有关系

小文

这个太好玩了

世外桃源

这个是做播放器的

梦油

马黑黑 发表于 2023-12-23 16:24
木有，和游戏没有关系

挺好玩的。

马黑黑

梦油 发表于 2023-12-23 16:43
挺好玩的。

马黑黑

世外桃源 发表于 2023-12-23 16:34
这个是做播放器的

也可以

马黑黑

红影 发表于 2023-12-23 14:36
现在的就挺好看啊，像有立体感似的

有一点

红影

马黑黑 发表于 2023-12-23 16:23

当心碰多了爆炸

红影

马黑黑 发表于 2023-12-23 17:35
有一点

黑黑弄出来都好看

马黑黑

红影 发表于 2023-12-23 20:27
黑黑弄出来都好看

也许有一点点

马黑黑

红影 发表于 2023-12-23 20:27
当心碰多了爆炸

都有防爆功能了

红影

马黑黑 发表于 2023-12-23 21:11
都有防爆功能了

那个外壁还不够厚