html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)
原文：https://www.cnblogs.com/wenruo/p/9732704.html
先上效果
基本是用CSS實(shí)現(xiàn)的，沒有用圖片，加一丟丟JS。不過沒有考慮太多兼容性。
首先畫一個(gè)轉(zhuǎn)盤
<html lang="en"><head> <meta charset="UTF-8"> <title>幸運(yùn)大轉(zhuǎn)盤title> <style> /* 重置默認(rèn)樣式 */ * { 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">開始抽獎(jiǎng)div> div> div>body>html>效果如下，配色什么的不要在意，可能比較丑。。。
然后寫抽獎(jiǎng)指針的小箭頭，用CSS畫三角形是一個(gè)比較常見的問題，通過設(shè)置width和height為0，然后用border實(shí)現(xiàn)。
如圖，矩形是由四個(gè)三角形邊框組成的，只要設(shè)置其它邊顏色為透明，就可以獲得單獨(dú)的三角形。
這里通過偽元素after實(shí)現(xiàn)三角形，并通過絕對(duì)定位將三角形定位到中間小圓的頂端。
.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)在才像一個(gè)指針了。?
哦 接下來是實(shí)現(xiàn)轉(zhuǎn)盤背景，不同的扇區(qū)對(duì)應(yīng)不同的獎(jiǎng)品，這樣就有一個(gè)需求：實(shí)現(xiàn)任意角度扇形。
可能會(huì)想當(dāng)然的認(rèn)為和三角形一樣，不過是加一個(gè)border-radius而已，高度是圓半徑，寬度是tan(θ/2)，但是實(shí)現(xiàn)出來的效果和想象并不一樣……(可能需要做一些其他操作以達(dá)到效果，但是我沒想到。
最后還是求助了搜索引擎。不得不承認(rèn)dalao們實(shí)在是太nb了，qaq……通過?linear-gradient 實(shí)現(xiàn)想法是真的棒。不過還有好多復(fù)雜的實(shí)現(xiàn)看的不是很懂= =
How to draw a circle sector in CSS?
Segments in a circle using CSS3
3種純CSS實(shí)現(xiàn)中間鏤空的12色彩虹漸變圓環(huán)方法
實(shí)現(xiàn)就是通過兩個(gè)正方形取相交區(qū)域。
我覺圖畫的還是挺好的:D?
沒有用偽元素實(shí)現(xiàn)，因?yàn)槲疫€要加文字，至于文字的位置，我真的是瞎調(diào)的，反正正經(jīng)寫代碼也不會(huì)這么寫= =
<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>效果如下，一個(gè)帶有文字的小扇形~~OK，現(xiàn)在寫一堆扇形放到一開始的轉(zhuǎn)盤上。
現(xiàn)在的代碼是醬紫滴~~太長(zhǎng)了折起來。
?View Code
嘻嘻，現(xiàn)在是抽獎(jiǎng)轉(zhuǎn)盤的樣子了吧~~~
最后再加點(diǎn)浮夸的燈。
?View Code
現(xiàn)在轉(zhuǎn)盤CSS部分基本完成。簡(jiǎn)單寫一下JS部分。點(diǎn)擊中間的指針時(shí)，指針會(huì)轉(zhuǎn)，可以拉一條貝塞爾曲線，控制動(dòng)畫的速度。
貝塞爾曲線可以簡(jiǎn)單的看作是時(shí)間-距離曲線，斜率就是速度。因?yàn)檗D(zhuǎn)盤的速度肯定是先快后慢，隨便拉一條。
http://cubic-bezier.com/#.2,.93,.43,1
?
CSS中添加屬性
.pointer { // ... transition: transform 3s cubic-bezier(.2,.93,.43,1);}點(diǎn)擊開始抽獎(jiǎng)的時(shí)候，為中間的指針加一個(gè)旋轉(zhuǎn)的角度。這里有一個(gè)問題就是不同的扇區(qū)抽到的概率是相同的，改成不同應(yīng)該…也蠻簡(jiǎn)單的，不過主要是想練下CSS，JS就隨便寫了。
JS部分代碼。。
let getEle = document.getElementsByClassName.bind(document);let pointer = getEle('pointer')[0];let result = getEle('result')[0];let onRotation = false; // 記錄當(dāng)前是否正在旋轉(zhuǎn)，如果正在旋轉(zhuǎn)，就不能繼續(xù)點(diǎn)擊了let reward = ['謝謝參與', '50積分', '謝謝參與', '100元話費(fèi)', '50積分', '謝謝參與', '100元話費(fèi)', '謝謝參與', '50積分', '10元話費(fèi)'];// 根據(jù)隨機(jī)角度獲取獎(jiǎng)勵(lì)let getReward = (function() { currentDeg = 0; return function() { // 轉(zhuǎn)三圈到四圈 let rotateDeg = Math.random() * 360 + 1080; currentDeg += rotateDeg; let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)] return { deg: currentDeg, text: rewardText === '謝謝參與' ? '很遺憾，您沒有獲得獎(jiǎng)品。' : '恭喜獲得: ' + rewardText } }})();pointer.addEventListener('click', () => { if (onRotation) return; console.log('開始抽獎(jiǎng)'); 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('抽獎(jiǎng)結(jié)束'); onRotation = false; result.style.display = 'block';})現(xiàn)在一個(gè)抽獎(jiǎng)轉(zhuǎn)盤基本完成了，最后一個(gè)需求，如果旁邊的等能夠亮起來就好了。至于燈怎么亮，就需要用到CSS3的動(dòng)畫了，我還不太熟悉，先去學(xué)習(xí)一下>_<
我學(xué)完回來了，參考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，內(nèi)容不是很多。
?animation-name?指定動(dòng)畫名稱，
?animation-duration?指定動(dòng)畫持續(xù)時(shí)間，
?animation-timing-function?指定動(dòng)畫函數(shù)，和transition的函數(shù)是一樣的，
?animation-delay?指定動(dòng)畫延遲多久后執(zhí)行，
?animation-iteration-count?指定動(dòng)畫執(zhí)行多少次，默認(rèn)為一次，可以指定為infinite，無限循環(huán)。
?animation-direction?指定動(dòng)畫多次播放時(shí)，一次結(jié)束，下一次怎么接上一次，如圖。
?animation-fill-mode?指定動(dòng)畫結(jié)束后停在什么位置，默認(rèn)回到起始狀態(tài)，forwards表示讓動(dòng)畫停留在結(jié)束狀態(tài)，backwards讓動(dòng)畫回到第一幀的狀態(tài)，both根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則。
?animation-play-state?動(dòng)畫執(zhí)行狀態(tài)，默認(rèn)為running，可以設(shè)置為pause，動(dòng)畫將在當(dāng)前狀態(tài)停止，再改為running時(shí)，會(huì)接著上一次停止的位置繼續(xù)執(zhí)行動(dòng)畫。
使用關(guān)鍵字?keyframes?來定義一個(gè)動(dòng)畫。通過百分比指定其中任意幾個(gè)狀態(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>這是一個(gè)方塊，先慢速閃三下，再快速閃三下，最后消失。animation:?1s twinkling 3;
就相當(dāng)于
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 反正我只能寫成這樣了。
最后把動(dòng)畫加到轉(zhuǎn)盤的燈上。完成代碼(好像顏色變了，咳，那是因?yàn)槲襛nimation學(xué)了太久都掉色了)：
<html lang="en"><head> <meta charset="UTF-8"> <title>幸運(yùn)大轉(zhuǎn)盤title> <style> * { /* 重置默認(rèn)樣式 */ 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元話費(fèi)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元話費(fèi)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元話費(fèi)span> div> div> <div class="pointer">開始抽獎(jiǎng)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; // 記錄當(dāng)前是否正在旋轉(zhuǎn)，如果正在旋轉(zhuǎn)，就不能繼續(xù)點(diǎn)擊了 let reward = ['謝謝參與', '50積分', '謝謝參與', '100元話費(fèi)', '50積分', '謝謝參與', '100元話費(fèi)', '謝謝參與', '50積分', '10元話費(fèi)']; // 根據(jù)隨機(jī)角度獲取獎(jiǎng)勵(lì) let getReward = (function() { currentDeg = 0; return function() { // 轉(zhuǎn)三圈到四圈 let rotateDeg = Math.random() * 360 + 1080; currentDeg += rotateDeg; let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)] return { deg: currentDeg, text: rewardText === '謝謝參與' ? '很遺憾，您沒有獲得獎(jiǎng)品。' : '恭喜獲得: ' + rewardText } } })(); pointer.addEventListener('click', () => { if (onRotation) return; console.log('開始抽獎(jiǎng)'); 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('抽獎(jiǎng)結(jié)束'); setTimeout(() => { // 等閃爍三下結(jié)束 onRotation = false; lights.forEach(light => { light.className = 'light'; }); result.style.display = 'block'; }, 300); })script>body>html>點(diǎn)個(gè)『在看』支持下?
總結(jié)
以上是生活随笔為你收集整理的html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 被蚊子咬了怎么止痒？
- 下一篇： flex 平铺布局_CSS3 Flex布