H5转盘抽奖功能

做效果习惯性的先上X度转转，找了几个demo都不尽人意于是各取所长。

要素：定时器，实现帧动画；随机数，实现任意动画步长；Css3 transition，也可以实现帧动画。

定时器直接舍弃，动画用css实现算是省劲了，也不用担心性能问题。

<div class="box">
   <div class="img">
   </div>
   <a class="btn" onclick="goOn()" href="javascript:;" title="开始抽奖"></a>
</div>

     .box {
         width: 100%;
         height: 400px;
         position: relative;
     }
     .box .img {
         width: 340px;
         height: 340px;
         position: absolute;
         background: url(img/bac.png) no-repeat;
         left: 50%;
         top: 50%;
         transform: translate3d(-50%,-50%,0);
         -webkit-transform: translate3d(-50%,-50%,0);
     }
     .box .btn {
         width: 186px;
         height: 186px;
         position: absolute;
         top: 50%;
         left: 50%;
         margin-left: -94px;
         margin-top: -94px;
         background: url(img/btn.png) no-repeat;
         transition: transform 1s ease-in-out;
         -webkit-transition: transform 1s ease-in-out;
         -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
     }

    var rotateMain = document.querySelector('.btn');
 	function goOn () {
 		var data = [1, 2, 3, 4, 5, 6];//抽奖
        //data为随机出来的结果，根据概率后的结果
        data = data[Math.floor(Math.random() * data.length)];//1~6的随机数
        console.log(data)
        rotateDeg (data)
 	}
 	function rotateDeg (s) {
 		rotateMain.style.webkitTransform="rotate("+(1080+60*s)+"deg)";
 		rotateMain.addEventListener("webkitTransitionEnd", function () {
 			 alert('恭喜您中大奖啦....快来精彩说领取！')
 			 location.reload()
 			//rotateMain.style.webkitTransform="rotate(0deg)";
 		});
 	}

图片要自行准备一下！！！1