CSS3实现人物上下跳动

最新推荐文章于 2024-08-23 14:38:37 发布

北极光LG

最新推荐文章于 2024-08-23 14:38:37 发布

阅读量1.6k

点赞数

文章标签： CSS3

本文链接：https://blog.csdn.net/weixin_44538667/article/details/86549152

版权

本文通过CSS3详细介绍了如何实现人物上下跳动的动画效果，包括HTML布局、CSS样式设置以及关键的transform属性和animation动画的运用，最终达到人物持续跳动的视觉效果。

摘要由CSDN通过智能技术生成

CSS3实现人物上下跳动


开发工具与关键技术：Adobe Dreamweaver CC 2017，CSS3

作者：易金亮

撰写时间：2019.01.19

下面我们通过CSS3来实现人物上下跳动的动画，首先通过HTML给它设置两个盒子，如下代码：

在这里插入图片描述
这两个盒子里分别放一张图片，分别是运动的人物和参照物气球，如下截图：

然后给它们设置一些CSS样式，如下截图：

最后就是关键一步了，通过transform属性给它设置垂直方向的位移量，在通过animation给它设置运动时间和循环运动（infinite），设置循环运动后它就能不停的运动了，最后再通过@keyframes给它设置每个时间段垂直方向的位移量，代码如下截图所示：
在这里插入图片描述
就这样就可以实现人物上下来回跳动了，因为只能放图片，所以动画效果就展示不了了，下面就放一张跳动后的截图吧

要想看动画效果可以自己打一遍代码哦~~~