关于网页抽奖，在UI方面主要有方框奖品跳动、翻牌抽奖、或者圆盘转动等大体几种形式。曾经在网上看到一个”点击抽奖”直接切换gif动画图的，这会不会有点欺骗用户之嫌，哈哈。

方框类抽奖可以通过不断改变某定位元素的left和top值。翻牌抽奖则可以在点击后给当前牌加相应的class，class设置对应的背景。当然可能你有更好的思路。

至于圆盘抽奖，在css3之前，转盘类抽奖基本上都是基于flash。而此篇文章主要讲述的是利用css3中transform里rotate属性来转动指针抽奖；

抽奖的本质都是一样，概率性事件。这个我们大可使用随机数来求取某个数值范围内的数，再根据活动需求控制中奖几率。其实在用户点完按钮，抽奖的结果就也立即出来了。当然，这些都不是本篇文章的重点，所谓方框奖品跳动、纸牌翻转、指针转动都只是给用户看的。

本篇的重点，如何让转盘指针根据点击后的随机数最终停到对应的奖区？

我们分析转盘的过程：一个转盘抽奖，用户点击”开始抽奖”，首先指针应该先快速转动，一定时间后，再逐渐减速，最后指针停留在对应的奖区中央。

于是我开始了第一种思路：

在指针转动过程中，随时间变化，逐渐增大animation的duration，最后通过判断旋转的角度来控制指针停止。但结果无效。并不是不能改变duration，而是元素在动画过程中，如果keyframes相同的话，无论duration是否改变，元素只执行最初的duration动画直到停止。

于是第一种思路被判了死刑。

然后我有了第二种思路：

根据随机数值，然后通过设置不同时间的延时定时器（setTimeout），让指针在某个点自动停止（animation-play-state:paused）。
但这个方法需要计算每个延迟的时间点，而且既然是定时停止，必然不能用变速动画，只能线性匀速的（linear）。

<style>
.ele-stop{-webkit-animation-play-state:paused;animation-play-state:paused;}
</style>
...

<script>
timer=setTimeout(funciton(){
　　ele.className+=" ele-stop";
},time)
</script>

因此这种思路太过牵强，其一指针停止前并非减速动画，其二计算每个延迟点也显得颇于麻烦，所以第二种思路也被枪毙了。

最终第三种思路：

因为指针最后停留的几个角度都是固定的，所以我们可以为每个奖区设定对应的动画帧和调用它的class，再结合减速动画（ease-out）。最后通过获取的随机数来给指针添加相应的class。此方法虽css代码太多，但却能很好的达到转盘的抽奖效果。

<style>
.ele-move02{-webkit-animation:rorate02 10s 0s ease-out 1 forwards normal; animation:rorate02 10s 0s ease-out 1 forwards normal; }
.ele-move03{-webkit-animation:rorate02 10s 0s ease-out 1 forwards normal; animation:rorate02 10s 0s ease-out 1 forwards normal; } 
@keyframes rorate02{ 0% { transform: rotate(0deg);} 100% { transform: rotate(3300deg);} }

@keyframes rorate03{ 0% { transform: rotate(0deg);} 100% { transform: rotate(3360deg); } } 
</style>

...

<script>
ele.className +=" ele-move" + iVal;
</script>

另外，需要注意的点：

  1. 页面防止刷新
  2. 抽奖转动过程中按钮不可点

最后，来试试下手气吧： 欢乐大转盘