单个粒子绕圆圈演示

马黑黑

代码

1. <style>
   
2.         #wrap {
   
3.                 --size: 500px; /* 容器元素尺寸 */
   
4.                 margin: 100px auto;
   
5.                 width: var(--size);
   
6.                 height: var(--size);
   
7.                 border: 1px solid skyblue;
   
8.                 border-radius: 50%;
   
9.                 position: relative;
   
10.         }
    
11.         li-zi {
    
12.                 position: absolute;
    
13.                 width: 60px;
    
14.                 height: 60px;
    
15.                 border-radius: 50%;
    
16.                 background: radial-gradient(at 20% 30%, tan 1%, skyblue);
    
17.                 box-shadow: 4px 4px 8px gray;
    
18.                 transform: rotate(var(--deg)) translate(var(--r));
    
19.         }
    
20. </style>
    
21. 
    
22. <section id="wrap" title="点击开始/暂停">
    
23.         <li-zi></li-zi>
    
24. </section>
    
25. 
    
26. <script>
    
27.         var lz = wrap.querySelector('li-zi'); // 获取粒子元素
    
28.         var angle = Math.floor(Math.random() * 360); // 粒子随机旋转角度
    
29.         var r = (wrap.clientWidth - lz.clientWidth) / 2 + lz.clientWidth / 2; // 粒子平移半径
    
30.         var rtime, isRun = false; // 请求关键帧id、粒子运行标识
    
31. 
    
32.         // 初始化粒子CSS数据
    
33.         lz.style.cssText += `
    
34.                 left: calc(50% - ${lz.clientWidth / 2}px);
    
35.                 top: calc(50% - ${lz.clientHeight / 2}px);
    
36.                 --deg: ${angle}deg;
    
37.                 --r: ${r}px;
    
38.         `;
    
39. 
    
40.         // 容器单击事件
    
41.         wrap.onclick = () => {
    
42.                 isRun ? cancelAnimationFrame(rtime) : rtime = animate();
    
43.                 isRun = !isRun;
    
44.         };
    
45. 
    
46.         // 循环运行动画
    
47.         function animate() {
    
48.                 rtime = requestAnimationFrame(animate);
    
49.                 lz.style.setProperty('--deg', angle + 'deg');
    
50.                 angle = (angle + 0.5) % 360;
    
51.         }
    
52. </script>

复制代码

效果在二楼

马黑黑

马黑黑

这个例子，使用 requestanimationframe（请求关键帧动画）API驱动数据变更，转圈效果一般而言更为流畅。

调整转圈的速度，修改 50 行代码的 0.5 为期望的数值（正负浮点数或整数都可以）。

马黑黑

animate 动画函数就是不断地加角度，所加的歩幅 0.5，减去 0.5 会往相反方向绕圈

红影

这个就是用增加或减少角度而旋转呢，转动很平稳

马黑黑

红影 发表于 2025-7-13 23:03
这个就是用增加或减少角度而旋转呢，转动很平稳

单个粒子可能更容易理解吧。理解了这个，其它的就有基础了

小文

问好先生，欣赏了。

杨帆

讲的真好，深入浅出，栩栩如生，谢谢马老师

马黑黑

杨帆 发表于 2025-7-14 15:37
讲的真好，深入浅出，栩栩如生，谢谢马老师

马黑黑

小文 发表于 2025-7-14 08:36
问好先生，欣赏了。

红影

马黑黑 发表于 2025-7-13 23:08
单个粒子可能更容易理解吧。理解了这个，其它的就有基础了

黑黑说得太对了，单个的个容易理解呢

马黑黑

红影 发表于 2025-7-15 12:06
黑黑说得太对了，单个的个容易理解呢

不过单个难以构成精彩的效果

红影

马黑黑 发表于 2025-7-15 18:13
不过单个难以构成精彩的效果

先学简单的，复杂的等会了简单的再说啊

马黑黑

红影 发表于 2025-7-15 20:48
先学简单的，复杂的等会了简单的再说啊

一般都酱紫

红影

马黑黑 发表于 2025-7-15 20:50
一般都酱紫

循序渐进

马黑黑

红影 发表于 2025-7-15 20:58
循序渐进

这是道理

红影

马黑黑 发表于 2025-7-15 20:58
这是道理

是的，这样自然进步

马黑黑

红影 发表于 2025-7-15 21:53
是的，这样自然进步

说得对

红影

马黑黑 发表于 2025-7-15 22:41
说得对

但做得不对，学习不够认真

马黑黑

红影 发表于 2025-7-16 10:37
但做得不对，学习不够认真

每个人都是时间精力有限，能学多少算多少