CSS3动画属性练习-小熊跑跑
发布时间
阅读量：
阅读量
通过CSS的动画属性animation和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果（ 图片素材及源码见文末链接 ）
1、雪山动画的实现：
将素材图片作为背景图 应用到“雪山”盒子里（.bg1 和 .bg2）
动画实现有 两种 方式：
a. 移动整个“雪山”盒子 （盒子是绝对定位的，left的值从 0 变化到 -3840px）
注意：这里两个盒子的宽度都比背景图的宽度宽 一个屏幕宽度（3840px + 100%），这是为了动画循环播放时衔接顺畅
b. 移动背景图片
注意：背景图片要设置为在水平方向重复，即 “repeat-x”，此时雪山盒子宽度至少和屏幕宽度一样即可
2、小熊动画的实现：
将素材图片作为背景图应用到“小熊”盒子里（.bear）
小熊动画包括两部分 ：
a. 小熊一直要保持的连贯奔跑效果
b. 小熊在开场时跑到中间
a部分的动画要通过移动背景图片 来实现，这里使用的动画定时函数为 steps(8) ，动画重复次数为 无限次
关于steps()的使用可以参考我的另一篇文章
b部分的动画要通过移动整个盒子 来实现，并且在盒子移动到中间位置时就保持住最后的状态不再移动（将 fill-mode 设置为 forwards）
代码运行效果
文章源码：https://gitee.com/thisismyaddress/bocheng-blogs/tree/master/网页特效/小熊跑跑
全部评论 (0)
还没有任何评论哟~