如何使用CSS或JS实现这个点动画？

Question

此GIF来自dribbble。

我尝试用纯CSS编写demo，这是我的代码的一部分：

setx PATH "{earlier PATH value}"   

它们不会作为一个整体旋转。

gif中心的混合动画不是必需的，我只想实现旋转效果。

希望有人可以帮助我。

Answer 1

这是复合或嵌套的动作。分解是：

• 这些点本身只是沿着一条直线向内滑动，并且在它们行进时缩小了一点
• 每个点的开始时间与最后一个点略有偏移，因此它们看起来依次行进，这给人一种漩涡的幻觉。
• 最后，这些点将全部归入父元素下，该元素的唯一作业是旋转。

按照这种方法，您可以轻松地将简单的平移和旋转动画应用于每个元素，并且仍然可以获得这种旋转效果。

Answer 2

这有点晚了，但这是我的追随者@ Soviut的答案

https://jsfiddle.net/hfpymtba/

＆＃39;旋转＆＃39;动画应用于容器

@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

引力子＆＃39;动画应用于圆类

@keyframes graviton{
  100%{
    top:50%;
    left:50%;
  }
}

由于圆圈并非完美地围绕着容器的中心，因此有一些摆动。