不用任何js库，只用CSS3和JS实现的转盘抽奖！

 

如图：

 

思路：转盘为一个圆形，可以想到CSS3的transform: rotate(360deg)，对，就是旋转。

          1、让中间的指针在转盘上旋转，达到抽奖的动画。

          2、确定指针停下来的位置，基本就完成了。剩下的联调了，就不用多说了。

实现步骤：

          1、将页面按照设计图排好版。

          2、将第一个奖品定位到指针正中的位置，第二个将第一个复制+旋转60度，以此例推。

          3、奖品放好了，接下来就开始设计指针的动画，默认转几圈（6圈？7圈？【 rotate(360*6deg)】【 rotate(360*7deg)】）

          4、动画完成之后，在最后停留在想要停留的位置。一等奖（1*60），二等奖（2*60），以此例推。

          5、跟后台配合好需要的参数。OK完成

主要代码：

clickLottery=() => {
    const { isBtnEnable } = this.state
    // 禁止用户连续点击
    if (isBtnEnable) {
      this.setState({ isBtnEnable :false })
      clearTimeout(this.timer)
      let slugNumber = 5
      this.animation(2* 60) // // 停留的位置
      this.timer = setTimeout(() => {
        this.setState({ isBtnEnable :true })
      }, 6000)
    }
  }
  animation = (circle) => {
    let rotateTip = this.refs.rotate_tip
    let initDeg = 0
    if (rotateTip.style.transform)initDeg = rotateTip.style.transform.replace(/[^0-9]/ig, '') * 1
    // 缓冲为6圈
    rotateTip.style.transform = `rotate(${3600 + circle + initDeg - initDeg % 360}deg)`
  }