5分钟教你利用css3动画实现奔跑的北极熊效果

实现原理:利用css3动画中的animation-timing-function的steps()，让一张有连续动作图片一段一段的在页面上显示出来，从而实现动画效果。

1.需要素材:

2.准备一个div盒子

div盒子的作用：用于显示素材中的一只北极熊。因为我们的素材是1600x100，有8只北极熊，所以我们div盒子的宽高就是200x100,这样我们就把我们的素材分成8份了

<div class="box">div>

body {
	margin: 0;
	padding: 0;
	/* 由于我们的素材是透明的，方便观看，我们加上灰色背景 */
	background-color: #ccc; 
}
.box {
	width: 200px;
	height: 100px;
	background: url("./bear-25676f9.png") no-repeat;
}

这样我们的页面就有个小熊了:

3.加上动画效果

动画：通过让背景图片每段从左向右每200px移动一次

@keyframes bear {
	100% {
	/* 因为小熊是从左向右进行显示的，因为box是没有移动的，从而背景图片的是向左走的。所以是-1600px，而高度是不变的 所以是0*/
		background-position: -1600px 0;
	}
}

在.box中调用bear这个动画

.box {
	width: 200px;
	height: 100px;
	background: url("./bear-25676f9.png") no-repeat;
	/*steps(8):将动画效果变成一段一段的展示，变成8段*/
	/* infinite: 让小熊一直重复的跑 */
	animation: bear 1s steps(8) infinite forwards;
}

完整代码

    
    
    
    



    
"box">