我想使用 div 创建无限符号动画。 需要在div上做什么样的动画才能实现。
提前致谢!
最佳答案
好吧,例如在这张图片中:
所有的紫色都是你的“球”应该通过的点。
您可以将每个点视为关键帧。 100% 时间内有 16 个点(中间 2 个相同)。这意味着每个关键帧占总时间的 6.25%。
这个球很容易用 CSS 创建:
.ball
{
width: 10px;
height: 10px;
background-color: black;
border-radius: 40px;
position: absolute;
}
基本上,您定义每个点的左侧和顶部位置。
现在我已经做了一个非常小的例子,因为我没有太多时间;p 但我希望你明白我正在尝试做什么: jsFiddle
更多关于动画的信息here .
更新
如果没有一个有效的例子,我不能让这个答案成立。所以特此:
jsFiddle
如您所见,过渡并不那么顺利。您添加的路径点越多,动画曲线就越平滑。
关于javascript - 如何使用 CSS 动画创建无限符号轨迹?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19233230/