溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用CSS實現(xiàn)一個抽獎轉盤”，在日常操作中，相信很多人在怎么用CSS實現(xiàn)一個抽獎轉盤問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用CSS實現(xiàn)一個抽獎轉盤”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
基本是用CSS實現(xiàn)的，沒有用圖片，加一丟丟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實現(xiàn)。
如圖，矩形是由四個三角形邊框組成的，只要設置其它邊顏色為透明，就可以獲得單獨的三角形。
這里通過偽元素after實現(xiàn)三角形，并通過絕對定位將三角形定位到中間小圓的頂端。
.pointer::after { content: ''; position: absolute; left: 14px; top: -24px; border-width: 12px 6px; border-style: solid; border-color: transparent; border-bottom-color: #c0381f; }現(xiàn)在才像一個指針了。
哦 接下來是實現(xiàn)轉盤背景，不同的扇區(qū)對應不同的獎品，這樣就有一個需求：實現(xiàn)任意角度扇形。
可能會想當然的認為和三角形一樣，不過是加一個border-radius而已，高度是圓半徑，寬度是tan(θ/2)，但是實現(xiàn)出來的效果和想象并不一樣……（可能需要做一些其他操作以達到效果，但是我沒想到。
最后還是求助了搜索引擎。不得不承認dalao們實在是太nb了，qaq……通過 linear-gradient 實現(xiàn)想法是真的棒。不過還有好多復雜的實現(xiàn)看的不是很懂= =
How to draw a circle sector in CSS?
Segments in a circle using CSS3
3種純CSS實現(xiàn)中間鏤空的12色彩虹漸變圓環(huán)方法
實現(xiàn)就是通過兩個正方形取相交區(qū)域。
我覺圖畫的還是挺好的:D
沒有用偽元素實現(xiàn)，因為我還要加文字，至于文字的位置，我真的是瞎調的，反正正經寫代碼也不會這么寫= =
<!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，現(xiàn)在寫一堆扇形放到一開始的轉盤上。
現(xiàn)在的代碼是醬紫滴~~太長了折起來。
<!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>
嘻嘻，現(xiàn)在是抽獎轉盤的樣子了吧~~~
最后再加點浮夸的燈。
<!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>
現(xiàn)在轉盤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 rewardrewardText = 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'; })現(xiàn)在一個抽獎轉盤基本完成了，最后一個需求，如果旁邊的等能夠亮起來就好了。
至于燈怎么亮，就需要用到CSS3的動畫了，我還不太熟悉，先去學習一下>_<
我學完回來了，參考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，內容不是很多。
animation-name 指定動畫名稱，
animation-duration 指定動畫持續(xù)時間，
animation-timing-function 指定動畫函數(shù)，和transition的函數(shù)是一樣的，
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)。
嘗試著寫一下=。=
<!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; // 記錄當前是否正在旋轉，如果正在旋轉，就不能繼續(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 rewardrewardText = 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實現(xiàn)一個抽獎轉盤”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
