用CSS實現一個抽獎轉盤(附詳細代碼+思路)
作者：我不吃餅干呀
https://www.cnblogs.com/wenruo/p/9732704.html
基本是用CSS實現的，沒有用圖片，加一丟丟JS。完全沒有考慮兼容性。
首先畫一個轉盤
<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;}
現在才像一個指針了。?
哦 接下來是實現轉盤背景，不同的扇區(qū)對應不同的獎品，這樣就有一個需求：實現任意角度扇形。
可能會想當然的認為和三角形一樣，不過是加一個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色彩虹漸變圓環(huán)方法
?
實現就是通過兩個正方形取相交區(qū)域。
我覺圖畫的還是挺好的:D?
沒有用偽元素實現，因為我還要加文字，至于文字的位置，我真的是瞎調的，反正正經寫代碼也不會這么寫= =
<html lang="en"><head><meta charset="UTF-8"><title>Documenttitle><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，現在寫一堆扇形放到一開始的轉盤上。
現在的代碼是醬紫滴~~太長了折起來。
<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>
嘻嘻，現在是抽獎轉盤的樣子了吧~~~
最后再加點浮夸的燈。
<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>
現在轉盤CSS部分基本完成。簡單寫一下JS部分。點擊中間的指針時，指針會轉，可以拉一條貝塞爾曲線，控制動畫的速度。
貝塞爾曲線可以簡單的看作是時間-距離曲線，斜率就是速度。因為轉盤的速度肯定是先快后慢，隨便拉一條。
http://cubic-bezier.com/#.2,.93,.43,1
?
CSS中添加屬性
.pointer {// ...transition: transform 3s cubic-bezier(.2,.93,.43,1);}
點擊開始抽獎的時候，為中間的指針加一個旋轉的角度。這里有一個問題就是不同的扇區(qū)抽到的概率是相同的，改成不同應該…也蠻簡單的，不過主要是想練下CSS，JS就隨便寫了。
JS部分代碼。。
let getEle = document.getElementsByClassName.bind(document);let pointer = getEle('pointer')[0];let result = getEle('result')[0];let onRotation = false; // 記錄當前是否正在旋轉，如果正在旋轉，就不能繼續(xù)點擊了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?指定動畫持續(xù)時間，
?animation-timing-function?指定動畫函數，和transition的函數是一樣的，
?animation-delay?指定動畫延遲多久后執(zhí)行，
?animation-iteration-count?指定動畫執(zhí)行多少次，默認為一次，可以指定為infinite，無限循環(huán)。
?animation-direction?指定動畫多次播放時，一次結束，下一次怎么接上一次，如圖。
?animation-fill-mode?指定動畫結束后停在什么位置，默認回到起始狀態(tài)，forwards表示讓動畫停留在結束狀態(tài)，backwards讓動畫回到第一幀的狀態(tài)，both根據animation-direction輪流應用forwards和backwards規(guī)則。
?animation-play-state?動畫執(zhí)行狀態(tài)，默認為running，可以設置為pause，動畫將在當前狀態(tài)停止，再改為running時，會接著上一次停止的位置繼續(xù)執(zhí)行動畫。
使用關鍵字?keyframes?來定義一個動畫。通過百分比指定其中任意幾個狀態(tài)。
嘗試著寫一下=。=
<html lang="en"><head><meta charset="UTF-8"><title>Documenttitle><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學了太久都掉色了）：
<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; // 記錄當前是否正在旋轉，如果正在旋轉，就不能繼續(xù)點擊了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>
最后
歡迎加我微信(winty230)，拉你進技術群，長期交流學習...
歡迎關注「前端Q」,認真學前端，做個專業(yè)的技術人...
評論
圖片
表情