动画制作小球围绕中心旋转的效果

制作四个小圆围绕中心中心大圆环绕的效果

我一开始也很纠结圆运动的轨迹 但是让一个球不断的到下一个球的位置 就在

视觉上面造成了 绕圆环绕的效果  但是实际 是4个小圆 不断地循环 直线路径 

当2到了4的位置 2会突然闪现回去 造成了 4个圆的轨迹是绕圆心的 

由于 路径是直的 小圆圆心 与 大圆圆心的距离会有一个不均匀的变化  形成了 

远近的效果 

代码实现

border-radius：50%；实现圆形div

通过绝对定位 先把4个小圆 定位到4个等分点

然后通过@keyframes animation的各种属性

让1>2    2>4    4>3    3>1

然后infinite 无限重复 

就形成了环绕效果

1

2

3

4

 

Document

1

2

3

4

转载于:https://www.cnblogs.com/ATnTention/p/11291639.html