用CSS實現一個抽獎轉盤

阿新 • • 發佈：2021-12-27

原文：https://www.cnblogs.com/wenruo/p/9732704.html

先上效果

基本是用CSS實現的，沒有用圖片，加一丟丟JS。不過沒有考慮太多相容性。

首先畫一個

<!DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">
  <title>幸運大轉盤</title>
  <style>
    /* 重置預設樣式 */
    * {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background 
-color: #c0381f;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z 
-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #dc5b5b;
      border-radius: 50%;
      border: 1px solid #c0381f;
    }
</style>
</head>
<body>
  <div class="wrapper">
    <div class="panel">
      <div class="pointer">開始抽獎</div>
    </div>
  </div>
</body>
</html>

效果如下，配色什麼的不要在意，可能比較醜。。。

然後寫抽獎指標的小箭頭，用CSS畫三角形是一個比較常見的問題，通過設定width和height為0，然後用border實現。

如圖，矩形是由四個三角形邊框組成的，只要設定其它邊顏色為透明，就可以獲得單獨的三角形。

這裡通過偽元素after實現三角形，並通過絕對定位將三角形定位到中間小圓的頂端

.pointer::after {
      content: '';
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #c0381f;
}

現在才像一個指標了。

哦接下來是實現轉盤背景，不同的扇區對應不同的獎品，這樣就有一個需求：實現任意角度扇形。

可能會想當然的認為和三角形一樣，不過是加一個border-radius而已，高度是圓半徑，寬度是tan(θ/2)，但是實現出來的效果和想象並不一樣……（可能需要做一些其他操作以達到效果，但是我沒想到。

最後還是求助了搜尋引擎。不得不承認dalao們實在是太nb了，qaq……通過linear-gradient 實現想法是真的棒。不過還有好多複雜的實現看的不是很懂= =

How to draw a circle sector in CSS?

Segments in a circle using CSS3

3種純CSS實現中間鏤空的12色彩虹漸變圓環方法

實現就是通過兩個正方形取相交區域。

我覺圖畫的還是挺好的:D

沒有用偽元素實現，因為我還要加文字，至於文字的位置，我真的是瞎調的，反正正經寫程式碼也不會這麼寫= =

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sector {
            position: absolute;
            width: 100px;
            height: 200px;
            margin: 100px;
            border-radius: 0px 100px 100px 0;
            overflow: hidden;
            transform: rotate(-18deg);
        }
        .sector-inner {
            text-align: center;
            display: block;
            width: 40px;
            padding: 5px 3px 0 57px;
            height: 195px;
            background: #ffeab1;
            transform: translateX(-100px) rotate(36deg);
            transform-origin: right center;
            border-radius: 100px 0 0 100px;
        }
        .sector-inner span {
            display: block;
            transform-origin: center;
            transform: rotate(-19deg);
            color: #d46854;
        }
</style>
</head>
<body>
    <div class="sector">
        <div class="sector-inner">
            <span>謝謝參與</span>
        </div>
    </div>
</body>
</html>

效果如下，一個帶有文字的小扇形~~

OK，現在寫一堆扇形放到一開始的轉盤上。

現在的程式碼是醬紫滴~~太長了折起來。

View Code

嘻嘻，現在是抽獎轉盤的樣子了吧~~~

最後再加點浮誇的燈。

View Code

現在轉盤CSS部分基本完成。簡單寫一下JS部分。點選中間的指標時，指標會轉，可以拉一條貝塞爾曲線，控制動畫的速度。

貝塞爾曲線可以簡單的看作是時間-距離曲線，斜率就是速度。因為轉盤的速度肯定是先快後慢，隨便拉一條。

http://cubic-bezier.com/#.2,.93,.43,1

CSS中新增屬性

.pointer {
// ...
transition: transform 3s cubic-bezier(.2,.93,.43,1);
}

點選開始抽獎的時候，為中間的指標加一個旋轉的角度。這裡有一個問題就是不同的扇區抽到的概率是相同的，改成不同應該…也蠻簡單的，不過主要是想練下CSS，JS就隨便寫了。

JS部分程式碼。。

let getEle = document.getElementsByClassName.bind(document);
let pointer = getEle('pointer')[0];
let result = getEle('result')[0];
 
 
let onRotation = false; // 記錄當前是否正在旋轉，如果正在旋轉，就不能繼續點選了
let reward = ['謝謝參與', '50積分', '謝謝參與', '100元話費', '50積分', 
'謝謝參與', '100元話費', '謝謝參與', '50積分', '10元話費'];
 
 
// 根據隨機角度獲取獎勵
let getReward = (function() {
  currentDeg = 0;
  return function() {
    // 轉三圈到四圈
    let rotateDeg = Math.random() * 360 + 1080;
    currentDeg += rotateDeg;
    let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]
    return {
      deg: currentDeg,
      text: rewardText === '謝謝參與' ? '很遺憾，您沒有獲得獎品。' : '恭喜獲得: ' + rewardText
    }
  }
})();
 
 
pointer.addEventListener('click', () => {
  if (onRotation) return;
  console.log('開始抽獎');
  onRotation = true;
  let nextStatus = getReward();
  console.log(nextStatus)
  result.innerText = nextStatus.text;
  result.style.display = 'none';
  pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;
})
pointer.addEventListener('transitionend', () => {
  console.log('抽獎結束');
  onRotation = false;
  result.style.display = 'block';
})

現在一個抽獎轉盤基本完成了，最後一個需求，如果旁邊的等能夠亮起來就好了。

至於燈怎麼亮，就需要用到CSS3的動畫了，我還不太熟悉，先去學習一下>_<

我學完回來了，參考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，內容不是很多。

animation-name指定動畫名稱，

animation-duration指定動畫持續時間，

animation-timing-function指定動畫函式，和transition的函式是一樣的，

animation-delay指定動畫延遲多久後執行，

animation-iteration-count指定動畫執行多少次，預設為一次，可以指定為infinite，無限迴圈。

animation-direction指定動畫多次播放時，一次結束，下一次怎麼接上一次，如圖。

animation-fill-mode指定動畫結束後停在什麼位置，預設回到起始狀態，forwards表示讓動畫停留在結束狀態，backwards讓動畫回到第一幀的狀態，both根據animation-direction輪流應用forwards和backwards規則。

animation-play-state動畫執行狀態，預設為running，可以設定為pause，動畫將在當前狀態停止，再改為running時，會接著上一次停止的位置繼續執行動畫。

使用關鍵字keyframes來定義一個動畫。通過百分比指定其中任意幾個狀態。

嘗試著寫一下=。=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 30px;
            width: 30px;
            animation: 1s twinkling 3, 100ms 3s twinkling 3;
        }
        @keyframes twinkling {
            50% { background: red; }
        }
</style>
</head>
<body>
    <div></div>
</body>
</html>

這是一個方塊，先慢速閃三下，再快速閃三下，最後消失。

animation:1s twinkling 3;

就相當於

animation-name: twinkling;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 3;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

效果

我覺得還可以:P 反正我只能寫成這樣了。

最後把動畫加到轉盤的燈上。完成程式碼（好像顏色變了，咳，那是因為我animation學了太久都掉色了）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>幸運大轉盤</title>
  <style>
    * { /* 重置預設樣式 */
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      user-select: none;
    }
    .wrapper {
      position: relative;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #ff5555;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .light {
      position: absolute;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      top: 5px;
      left: 115px;
      transform-origin: 5px 115px;
    }
    .light-twinkling {
      animation: 1s twinkling 3, 100ms 3s twinkling 3;
    }
    .light:nth-child(2n) {
      background-color: #fafce7;
    }
    .light:nth-child(2n+1) {
      background-color: #ffe58b;
    }
    .light:nth-child(2) {
      transform: rotate(36deg);
    }
    .light:nth-child(3) {
      transform: rotate(72deg);
    }
    .light:nth-child(4) {
      transform: rotate(108deg);
    }
    .light:nth-child(5) {
      transform: rotate(144deg);
    }
    .light:nth-child(6) {
      transform: rotate(180deg);
    }
    .light:nth-child(7) {
      transform: rotate(216deg);
    }
    .light:nth-child(8) {
      transform: rotate(252deg);
    }
    .light:nth-child(9) {
      transform: rotate(288deg);
    }
    .light:nth-child(10) {
      transform: rotate(324deg);
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .sector {
      position: absolute;
      left: 100px;
      top: 0px;
      width: 100px;
      height: 200px;
      font-size: 14px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      transform-origin: left center;
    }
    .sector:nth-child(1) {
      transform: rotate(-18deg);
    }
    .sector:nth-child(2) {
      transform: rotate(18deg);
    }
    .sector:nth-child(3) {
      transform: rotate(54deg);
    }
    .sector:nth-child(4) {
      transform: rotate(90deg);
    }
    .sector:nth-child(5) {
      transform: rotate(126deg);
    }
    .sector:nth-child(6) {
      transform: rotate(162deg);
    }
    .sector:nth-child(7) {
      transform: rotate(198deg);
    }
    .sector:nth-child(8) {
      transform: rotate(234deg);
    }
    .sector:nth-child(9) {
      transform: rotate(270deg);
    }
    .sector:nth-child(10) {
      transform: rotate(306deg);
    }
    .sector:nth-child(2n+1) .sector-inner {
      background: #fef6e0;
    }
    .sector:nth-child(2n) .sector-inner {
      background: #ffffff;
    }
    .sector-inner {
      text-align: center;
      display: block;
      width: 40px;
      padding: 5px 3px 0 57px;
      height: 195px;
      transform: translateX(-100px) rotate(36deg);
      transform-origin: right center;
      border-radius: 100px 0 0 100px;
    }
    .sector-inner span {
      display: block;
      transform-origin: center;
      transform: rotate(-19deg);
      color: #d46854;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #ff5350;
      border-radius: 50%;
      border: 1px solid #ff5350;
      transition: transform 3s cubic-bezier(.2,.93,.43,1);
    }
    .pointer::after {
      content: '';
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #ff5350;
      transform-origin: center;
    }
    .result {
      margin: 20px 60px;
    }
 
 
    @keyframes twinkling {
      50% { background: transparent; }
    }
</style>
</head>
<body>
  <div class="wrapper">
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="panel">
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 5 0 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>100元話費</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 5 0 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>100元話費</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 5 0 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>10元話費</span>
        </div>
      </div>
      <div class="pointer">開始抽獎</div>
    </div>
  </div>
  <div class="result"></div>
 
 
  <script>
    let getEle = document.getElementsByClassName.bind(document);
    let pointer = getEle('pointer')[0];
    let result = getEle('result')[0];
    let lights = Array.prototype.slice.call(getEle('light'));
 
 
    let onRotation = false; // 記錄當前是否正在旋轉，如果正在旋轉，就不能繼續點選了
    let reward = ['謝謝參與', '50積分', '謝謝參與', '100元話費', '50積分', 
    '謝謝參與', '100元話費', '謝謝參與', '50積分', '10元話費'];
 
 
    // 根據隨機角度獲取獎勵
    let getReward = (function() {
      currentDeg = 0;
      return function() {
        // 轉三圈到四圈
        let rotateDeg = Math.random() * 360 + 1080;
        currentDeg += rotateDeg;
        let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]
        return {
          deg: currentDeg,
          text: rewardText === '謝謝參與' ? '很遺憾，您沒有獲得獎品。' : '恭喜獲得: ' + rewardText
        }
      }
    })();
 
 
    pointer.addEventListener('click', () => {
      if (onRotation) return;
      console.log('開始抽獎');
      onRotation = true;
      lights.forEach(light => { light.className += ' light-twinkling'; });
      let nextStatus = getReward();
      console.log(nextStatus)
      result.innerText = nextStatus.text;
      result.style.display = 'none';
      pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;
    })
    pointer.addEventListener('transitionend', () => {
      console.log('抽獎結束');
      setTimeout(() => { // 等閃爍三下結束
        onRotation = false;
        lights.forEach(light => { light.className = 'light'; });
        result.style.display = 'block';
      }, 300);
    })
</script>
</body>
</html>

用CSS實現一個抽獎轉盤

用CSS實現一個抽獎轉盤

用css實現一個硬幣旋轉的效果

什麼鬼，面試官竟然讓我用Redis實現一個訊息佇列？

用java實現一個簡單的區塊鏈：UTXO交易模型

什麼鬼，面試官竟然讓我用Redis實現一個訊息佇列！！？

用java實現一個簡單的區塊鏈

用 Java 實現一個簡單的虛擬機器器 ?

用Java實現一個靜態連結串列的方法步驟

用C++實現一個命令列進度條的示例程式碼

用Angular實現一個掃雷的遊戲示例

用Creator實現一個擀麵的效果

用JAVA實現一個簡單LRU演算法

用Vue實現一個簡單的圖片輪播

python用tkinter實現一個簡易能進行隨機點名的介面

用python實現一個簡單計算器（完整DEMO）

python用tkinter實現一個gui的翻譯工具

用 JavaScript 實現一個 TicTacToe 遊戲

css實現一個電影卡片

用python實現一個簡單的驗證碼

用Python實現一個簡單的資料處理

用CSS實現一個抽獎轉盤

相關推薦