如何控制CSS3动画的位移

最新推荐文章于 2026-02-14 08:34:14 发布

原创最新推荐文章于 2026-02-14 08:34:14 发布 · 2.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文分享了使用CSS3创建连续位移动画的方法，通过设置关键帧、transform属性及animation属性，实现了一个球形元素的无限循环位移效果。

开发工具与关键技术：DW与CSS3
作者：刘华叶
撰写时间：2019年1月30日

CSS3动画是我们经常用到的技术，可以做出很多有趣的东西，我就跟大家分享一下这个动画的位移。

在这里插入图片描述
这HTML代码非常简单设置一个类就行了。

在这里插入图片描述

这个CSS3代码首先给它设置一个关键帧，然后在transform设置它们的位移，然后就在设置它们的宽，高在设置它变成一个圆，还有边框，在用animation设置它的动画名称，动画时间，无限循环，动画正常播放属性就可以了。
在这里插入图片描述

属性设置完成后，这个球是连续位移的，不会停止，这样就完成了。