css - 使用 css 对进入中心图形然后环绕中心图形进行动画处理

Question

我有一个网站设计，其中有 7 个图形(所有尺寸都相同)。要求是他们沿着一条略微 flex 的路径从一边飞进来。第一个会去中间，然后其他人会进入围绕第一个的轨道，直到所有 6 个都均匀地围绕着它，此时他们都停下来。最后，中央图形需要脉动。

我不确定我是否解释得很好!

不幸的是，其中有几个具有不同的图形，所以我不想简单地将其制作成动画 gif 或其他任何东西。我看过一些帖子，例如，如何使用 CSS 显示航天器连续绕行星运行，或沿着 flex 的路径行驶，但我可以按照我描述的方式进行设置吗？我如何让“故事”经历阶段？

TIA

Answer 1

使用 CSS offset-path 或 motion-path，您可以为每个元素创建不同的路径。为每个元素的移动添加延迟，我认为您可以创建这样的动画。

为每个元素创建路径并不容易，但是 here是一个使用 CSS offset-path 在圆形路径上实现动画的教程。