用CSS實現一個抽獎轉盤

時間  2020-07-24
標籤 css 實現 一個 抽獎 轉盤 欄目 CSS 简体版
原文   原文鏈接

效果css

基本是用CSS實現的，沒有用圖片，加一丟丟JS。徹底沒有考慮兼容性。html

首先畫一個轉盤，css3

<!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>

效果以下，配色什麼的不要在乎，可能比較醜。。。app

而後寫抽獎指針的小箭頭，用CSS畫三角形是一個比較常見的問題，經過設置width和height爲0，而後用border實現。dom

如圖，矩形是由四個三角形邊框組成的，只要設置其它邊顏色爲透明，就能夠得到單獨的三角形。ide

這裏經過僞元素after實現三角形，並經過絕對定位將三角形定位到中間小圓的頂端。wordpress

.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，如今寫一堆扇形放到一開始的轉盤上。

如今的代碼是醬紫滴~~太長了折起來。

<!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;
    } .sector { position: absolute; width: 100px; height: 200px; border-radius: 0px 100px 100px 0; overflow: hidden; left: 100px; top: 0px; 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: #dc5b5b; border-radius: 50%; border: 1px solid #c0381f;
    } .pointer::after { content: ''; position: absolute; left: 14px; top: -24px; border-width: 12px 6px; border-style: solid; border-color: transparent; border-bottom-color: #c0381f;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="panel">
      <div class="sector">
        <div class="sector-inner">
          <span>謝謝參與</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 50 積分</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> 50 積分</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> 50 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>10元話費</span>
        </div>
      </div>
      <div class="pointer">開始抽獎</div>
    </div>
  </div>
</body>
</html>
View Code

嘻嘻，如今是抽獎轉盤的樣子了吧~~~

最後再加點浮誇的燈。

<!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%;
    } .light { position: absolute; height: 10px; width: 10px; border-radius: 50%; top: 5px; left: 115px; transform-origin: 5px 115px;
    } .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; width: 100px; height: 200px; border-radius: 0px 100px 100px 0; overflow: hidden; left: 100px; top: 0px; 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: #dc5b5b; border-radius: 50%; border: 1px solid #c0381f;
    } .pointer::after { content: ''; position: absolute; left: 14px; top: -24px; border-width: 12px 6px; border-style: solid; border-color: transparent; border-bottom-color: #c0381f;
    }
  </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> 50 積分</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> 50 積分</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> 50 積分</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>10元話費</span>
        </div>
      </div>
      <div class="pointer">開始抽獎</div>
    </div>
  </div>
</body>
</html>
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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程