HTML5摇一摇（下）—如何实现签筒摇动动画

演示demo：“摇一摇，万福签”

上一篇博客(HTML5摇一摇—如何判断设备摇动（上）)中讲到了如何利用HTML5中的DeviceOrientationEvent和DeviceMotionEvent来实现手机摇一摇的判断，这次主要来讲如何利用CSS3实现签筒摇动的动画

半透明遮罩层

当签筒摇动动画出发时，半透明遮罩层显示出来用来凸显签筒摇动的动画

/* 半透明遮罩层 */
.cover {
    background: rgba(0, 0, 0, 0.7) no-repeat top right;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}

CSS3动画关键帧

了解动画原理的人应该都知道，所谓的动画其实就是由若干个关键帧构成，当一连串的关键帧连续播放时就形成了我们所看见的动画

这里我们所用到的素材其实就是6张连续摇动的签筒所拼成的一张大图：