多个例子绕圈圈演示

马黑黑

马黑黑

代码：

1. <style>
   
2.         /* 多个粒子绕圆圈演示 */
   
3.     #wrap {
   
4.         --size: 500px; /* 容器元素尺寸 */
   
5.         margin: 100px auto;
   
6.         width: var(--size);
   
7.         height: var(--size);
   
8.         border: 4px dotted gray;
   
9.         border-radius: 50%;
   
10.         display: grid;
    
11.         place-items: center;
    
12.         position: relative;
    
13.     }
    
14.     #wrap::before {
    
15.         position: absolute;
    
16.         content: '点击开始/暂停';
    
17.         cursor: pointer;
    
18.     }
    
19.     li-zi {
    
20.         position: absolute;
    
21.         border-radius: 50%;
    
22.         background: radial-gradient(at 20% 30%, tan 1%, skyblue);
    
23.         box-shadow: 4px 4px 8px gray;
    
24.         transform: rotate(var(--deg)) translate(var(--r));
    
25.     }
    
26. </style>
    
27. 
    
28. <section id="wrap"></section>
    
29. 
    
30. <script>
    
31.         // 声明粒子数、粒子数组、粒子尺寸、请求关键帧id、粒子运行开关
    
32.         var total = 12, lzAr = [], lzSize = 60, rtime, isRun = false;
    
33. 
    
34.     // 创建粒子并初始化CSS数据
    
35.     Array.from({length: total}).forEach( (lz, idx) => {
    
36.             var angle = 360 / total * idx; // 角度
    
37.             var r = (wrap.clientWidth + lzSize) / 2 - lzSize / 2; // 绕圈半径
    
38.         lz = document.createElement('li-zi');
    
39.         lz.style.cssText += `
    
40.             width: ${lzSize}px;
    
41.             height: ${lzSize}px;
    
42.             --deg: ${angle}deg;
    
43.             --r: ${r}px;
    
44.         `;
    
45.         lzAr.push({ elm: lz, a: angle });
    
46.         wrap.appendChild(lz);
    
47.     });
    
48. 
    
49.     // 容器单击事件
    
50.     wrap.onclick = () => {
    
51.         isRun ? cancelAnimationFrame(rtime) : animate();
    
52.         isRun = !isRun;
    
53.     };
    
54. 
    
55.     // 循环运行动画
    
56.     function animate() {
    
57.         rtime = requestAnimationFrame(animate);
    
58.         lzAr.forEach( (lz, idx) => {
    
59.             lz.elm.style.setProperty('--deg', lz.a + 'deg');
    
60.             lz.a = (lz.a + 0.5) % 360;
    
61.         });
    
62.     }
    
63. </script>

复制代码

马黑黑

如果仅仅是绕圈圈，则，由父元素带动子元素旋转是最简洁、最节能的方法，但是，总得找到驱动粒子群运动的其它方法，例如本例粒子个体各自运动的实现方式——很多场合需要个体行为，整体行为替代不了。

红影

跟着链接，先跑到这个帖子里来了

红影

那个帖子，粒子不但各自运动，而且组合在一起的样子很好看

马黑黑

红影 发表于 2025-7-14 22:00
那个帖子，粒子不但各自运动，而且组合在一起的样子很好看

嗯，和这里的有所不同但总体原理不变

马黑黑

红影 发表于 2025-7-14 21:59
跟着链接，先跑到这个帖子里来了

跑跑更健康

杨帆

漂亮！谢谢马老师经典讲授与探索

红影

马黑黑 发表于 2025-7-14 22:07
嗯，和这里的有所不同但总体原理不变

实现运动的方式是一样的

红影

马黑黑 发表于 2025-7-14 22:07
跑跑更健康

也不算跑，一步就跨过来了

马黑黑

红影 发表于 2025-7-15 12:52
也不算跑，一步就跨过来了

那比企鹅厉害

马黑黑

红影 发表于 2025-7-15 12:52
实现运动的方式是一样的

对的

红影

马黑黑 发表于 2025-7-15 18:04
那比企鹅厉害

哪里，有链接啊，点一下不就是一步跨了么

红影

马黑黑 发表于 2025-7-15 18:04
对的

谢谢黑黑的讲解

马黑黑

红影 发表于 2025-7-15 20:21
谢谢黑黑的讲解

阔气了

马黑黑

红影 发表于 2025-7-15 20:18
哪里，有链接啊，点一下不就是一步跨了么

这么简单吗

亚伦影音工作室

跟着做了一个但默认想自动旋转，可是我才疏学浅，还请老师出山！

红影

马黑黑 发表于 2025-7-15 21:00
阔气了

应该的

红影

马黑黑 发表于 2025-7-15 21:00
这么简单吗

非常简单，如此简单

马黑黑

红影 发表于 2025-7-15 22:10
非常简单，如此简单

简单好