需求描述:
要求:熊在中点位置跑动,背景往后移动。
第一感觉:两个动画,一个让熊动,另一个让背景动;且动画循环播放。
<div class="box">
<div class="bear"></div>
</div>
/* 首先给body背景 */
body {
background-color: #ccc;
}
/* 盒子设置好尺寸 */
.box {
height: 100px;
width: 600px;
margin: 0 auto;
border-radius: 100px;
/* 注意溢出隐藏 */
overflow: hidden;
/* 这里用的是背景图片 */
background: url('./img/xs1.png')repeat-x left bottom / contain, url('./img/xs2.png')repeat-x left top / contain;
/* 背景移动动画 */
animation: bgTo 8s linear infinite;
}
@keyframes bgTo {
form {
background-position-x: 0px;
}
to {
background-position-x: -1400px;
}
}
.bear {
height: 100%;
width: 200px;
background: url('./img/bear.png') no-repeat;
/* 熊奔跑的动画 */
animation: run 1s steps(7) infinite;
margin: 0 auto;
}
/* 定义动画 */
@keyframes run {
form {
background-position-x: 0px;
}
to {
background-position-x: -1400px;
}
}
总结:本篇案例重点是用到动画的step属性,即实现帧动画。
熊总共有8帧,所以动画分7步完成。