前端面試題:手把手教你如何用 CSS 實現一個抽獎轉盤

語言: CN / TW / HK
ead>

theme: channing-cyan

小知識,大挑戰!本文正在參與“程序員必備小知識”創作活動。

基本是用CSS實現的,沒有用圖片,加一丟丟JS。完全沒有考慮兼容性。

首先畫一個轉盤,

```html

幸運大轉盤

開始抽獎

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

轉盤效果

然後寫抽獎指針的小箭頭,用 CSS 畫三角形是一個比較常見的問題,通過設置 widthheight0,然後用 border 實現。

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

Document

謝謝參與

```

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

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

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

查看代碼 ```html 幸運大轉盤
謝謝參與
50 積分
謝謝參與
100話費
50 積分
謝謝參與
100話費
謝謝參與
50 積分
10元話費
開始抽獎
```

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

最後再加點浮誇的燈。

查看代碼 ```html 幸運大轉盤
謝謝參與
5 0 積分
謝謝參與
100元話費
5 0 積分
謝謝參與
100元話費
謝謝參與
5 0 積分
10元話費
開始抽獎
```

現在轉盤 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 輪流應用 forwardsbackwards 規則。

  • animation-play-state 動畫執行狀態,默認為 running,可以設置為 pause,動畫將在當前狀態停止,再改為 running 時,會接着上一次停止的位置繼續執行動畫。
  • 使用關鍵字 keyframes 來定義一個動畫。通過百分比指定其中任意幾個狀態。

嘗試着寫一下=。=

```html

Document

```

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

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

幸運大轉盤

謝謝參與
5 0 積分
謝謝參與
100元話費
5 0 積分
謝謝參與
100元話費
謝謝參與
5 0 積分
10元話費
開始抽獎

```

最終效果: