以前总是看到些利用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中的参数,代表动画的结束位置。
感谢您的阅读,本文由 蓝色梦想 版权所有。如若转载,请注明出处:蓝色梦想 - Css Sprites 图片动画(Animation)
医药流通行业市场分析 说:
谢谢分享 支持
April 2, 2013 3:03 pm