昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十分周到,直接就给了我一个雪碧图,并告诉我在photoshop中可以用帧动画来播放几张图片,达到类似gif的效果,程序上实现也大抵如此吧。 卧槽真是个神奇的UI boy。 于是我顺着他的思路,用上了animation在timing-function中的steps属性。 先来看看UI给的图吧,是这样的:(注:图片宽度1200px) 如果要播放这张图片的话,很明显是分为五个帧,