大家一定都玩过掷色子的游戏，今天我给大家分享的是如何使用jQuery来实现掷色子的动画效果，通过jQuery的animate()自定义动画函数并结合CSS背景图片切换实现的动画效果

实现原理：当色子掷出后，通过jQuery的animate()函数改变色子位移，中间加入延时效果，并变换色子背景，最终动画运行到随机产生的点数时停止，并显示掷出的点数。其实就是动画过程加入多个不同图片的帧（同flash动画影片中的帧），帧数越多效果越好，然后逐帧运行后就形成了动画效果。一、准备工作我们需要准备色子素材，本示例中，我采用从网络上获取到的色子素材，我们要做处理的是将6个色子图片（1-6点），以及中间过渡效果的图片（做运动模糊处理）放在同一张图片上，保存为dice.png，用作色子背景图