前端面試題：手把手教你如何用 CSS 實現一個抽獎轉盤
ead>theme: channing-cyan
小知識，大挑戰！本文正在參與“程式設計師必備小知識”創作活動。
基本是用CSS實現的，沒有用圖片，加一丟丟JS。完全沒有考慮相容性。
首先畫一個轉盤，
```html
``` 效果如下，配色什麼的不要在意，可能比較醜。。。
然後寫抽獎指標的小箭頭，用 CSS 畫三角形是一個比較常見的問題，通過設定 width 和 height 為 0，然後用 border 實現。
如圖，矩形是由四個三角形邊框組成的，只要設定其它邊顏色為透明，就可以獲得單獨的三角形。
這裡通過偽元素after實現三角形，並通過絕對定位將三角形定位到中間小圓的頂端。
css
.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 實現想法是真的棒。不過還有好多複雜的實現看的不是很懂= =
最終選擇的實現就是通過兩個正方形取相交區域。
我覺圖畫的還是挺好的:D
沒有用偽元素實現，因為我還要加文字，至於文字的位置，我真的是瞎調的，反正正經寫程式碼也不會這麼寫= =
```html
```
效果如下，一個帶有文字的小扇形~~
OK，現在寫一堆扇形放到一開始的轉盤上。
現在的程式碼是醬紫滴~~ 太長了折起來。
檢視程式碼
```html嘻嘻，現在是抽獎轉盤的樣子了吧~~~
最後再加點浮誇的燈。
檢視程式碼
```html現在轉盤 CSS 部分基本完成。簡單寫一下 JS 部分。點選中間的指標時，指標會轉，可以拉一條貝塞爾曲線，控制動畫的速度。
貝塞爾曲線可以簡單的看作是時間-距離曲線，斜率就是速度。因為轉盤的速度肯定是先快後慢，隨便拉一條。
http://cubic-bezier.com/#.2,.93,.43,1
CSS中新增屬性
css
.pointer {
// ...
transition: transform 3s cubic-bezier(.2,.93,.43,1);
}
點選開始抽獎的時候，為中間的指標加一個旋轉的角度。這裡有一個問題就是不同的扇區抽到的概率是相同的，改成不同應該…也蠻簡單的，不過主要是想練下 CSS，JS 就隨便寫了。
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來定義一個動畫。通過百分比指定其中任意幾個狀態。
嘗試著寫一下=。=
```html
```
這是一個方塊，先慢速閃三下，再快速閃三下，最後消失。
animation: 1s twinkling 3;
就相當於
css
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 學了太久都掉色了）：
```html
```
最終效果：