以前总是看到些利用css sprites来制作各种各样的人物动画效果,突然上午一时兴起,于是乎也就自己动手做了个玩玩。

要说最早看到这个效果,应该是在Google(当时为了纪念现代舞先驱玛莎·葛兰姆(Martha Graham),Google涂鸦出现了一个舞蹈的动画,引得一时轰动。)不过那时还是利用js,制作人员把图片的位置都计算好,然后封装到js,用js把动画效果模拟出来。

随着现在css3的逐渐强大,我们直接利用css3的animate和keyframes属性就能完成(有Flash基础的会很容易理解)。

HTML CODE:

<div class="set standby"></div>

CSS CODE:

.standby {
	width: 120px;
	height: 150px;
	background-image: url("images/sailormars.png");
	-webkit-animation: standby 1.3s steps(8) infinite;
}
@-webkit-keyframes standby {
	from { background-position:0 0; }
	to { background-position: -960px 0; }
}

看完代码,是不是感觉so easy?

接下来说明几个注意事项:
1.animation:[动画名称] || [动画持续时间] || [动画步骤] || [动画循环次数]
2.steps(x),代表动画的步骤,x你有几个人物效果就写几个。
3.起始帧frome中的参数,代表动画的起始位置。
4.最后帧to中的参数,代表动画的结束位置。

DemoDownload