css3抽奖转盘html5,HTML5抽奖转盘-CSS3超简单版本

网上有很多关于抽奖转盘的代码和实例，有使用JavaScript控制动画的，有使用Canvas实现的，它们思路各不相同，本文将介绍一种采用CSS3的方式来实现转盘动画效果，非常简单，只需几行代码即可实现。

效果演示

demo地址

核心思路

采用CSS3的transition(过渡效果)，给定需要旋转的元素设置transform的rotate属性的结束角度，同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率，代码如下(浏览器前缀可自行添加)：

#pointer {

transition: transform 6.5s;

transition-timing-function: ease-in-out;

}

复制代码

这样，给定结束角度后，元素就会旋转，结束角度可以自由控制旋转的圈数，例如结束角度为angelEnd，即圈数m=angelEnd/360 并取整，前几圈转满360无需特殊处理，关键是最后一圈的角度决定了抽奖的结果，代码如下：

let base = 2160; //先转满360×6圈

let result = getRandom(-30,330); // 最后一圈角度，获取-30到330的随机数

let angelEnd = -(base+result)// 结束角度数，负数代表逆时针旋转

$("#pointer").css({"transform":"rotate(&