不用任何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)`
  }