javascript - 如何使用 CSS 动画创建无限符号轨迹？

Question

我想使用 div 创建无限符号动画。需要在div上做什么样的动画才能实现。

提前致谢!

Answer 1

好吧，例如在这张图片中:

所有的紫色都是你的“球”应该通过的点。您可以将每个点视为关键帧。 100% 时间内有 16 个点(中间 2 个相同)。这意味着每个关键帧占总时间的 6.25%。

这个球很容易用 CSS 创建:

.ball
{
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 40px;
    position: absolute;
}

基本上，您定义每个点的左侧和顶部位置。

现在我已经做了一个非常小的例子，因为我没有太多时间；p但我希望你明白我正在尝试做什么: jsFiddle

更多关于动画的信息here .

更新

如果没有一个有效的例子，我不能让这个答案成立。所以特此:

jsFiddle

如您所见，过渡并不那么顺利。您添加的路径点越多，动画曲线就越平滑。