溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)如何利用css實現(xiàn)一個抽獎動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
首先我們先來看下最終的運(yùn)行效果：
從效果圖我們可以看到，抽獎會自動進(jìn)行，并顯示中獎信息。
這個效果基本是用CSS實現(xiàn)的，沒有用圖片，加一丟丟JS。完全沒有考慮兼容性。
具體步驟如下：
首先畫一個轉(zhuǎn)盤
<!DOCTYPE html>
<html>
<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>
<div>
<div>開始抽獎</div>
</div>
</div>
</body>
</html>效果如下，配色什么的不要在意，可能比較丑。。。
然后寫抽獎指針的小箭頭，用CSS畫三角形是一個比較常見的問題，通過設(shè)置width和height為0，然后用border實現(xiàn)。
如圖，矩形是由四個三角形邊框組成的，只要設(shè)置其它邊顏色為透明，就可以獲得單獨(dú)的三角形。
這里通過偽元素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)轉(zhuǎn)盤背景，不同的扇區(qū)對應(yīng)不同的獎品，這樣就有一個需求：實現(xiàn)任意角度扇形。
可能會想當(dāng)然的認(rèn)為和三角形一樣，不過是加一個border-radius而已，高度是圓半徑，寬度是tan(θ/2)，但是實現(xiàn)出來的效果和想象并不一樣……（可能需要做一些其他操作以達(dá)到效果，但是我沒想到。
最后還是求助了搜索引擎。不得不承認(rèn)dalao們實在是太nb了，qaq……通過 linear-gradient 實現(xiàn)想法是真的棒。不過還有好多復(fù)雜的實現(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)，因為我還要加文字，至于文字的位置，我真的是瞎調(diào)的，反正正經(jīng)寫代碼也不會這么寫= =
<!DOCTYPE html>
<html>
<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>
<div>
<span>謝謝參與</span>
</div>
</div>
</body>
</html>效果如下，一個帶有文字的小扇形~~
OK，現(xiàn)在寫一堆扇形放到一開始的轉(zhuǎn)盤上。
現(xiàn)在的代碼是醬紫滴~~太長了折起來。
<!DOCTYPE html>
<html>
<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;
}
.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>
<div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span> 50 積分</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span>100話費(fèi)</span>
</div>
</div>
<div>
<div>
<span> 50 積分</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span>100話費(fèi)</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span> 50 積分</span>
</div>
</div>
<div>
<div>
<span>10元話費(fèi)</span>
</div>
</div>
<div>開始抽獎</div>
</div>
</div>
</body>
</html>
嘻嘻，現(xiàn)在是抽獎轉(zhuǎn)盤的樣子了吧~~~
（學(xué)習(xí)視頻分享：css視頻教程）
最后再加點(diǎn)浮夸的燈。
<!DOCTYPE html>
<html>
<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%;
}
.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>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span> 50 積分</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span>100話費(fèi)</span>
</div>
</div>
<div>
<div>
<span> 50 積分</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span>100話費(fèi)</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span> 50 積分</span>
</div>
</div>
<div>
<div>
<span>10元話費(fèi)</span>
</div>
</div>
<div>開始抽獎</div>
</div>
</div>
</body>
</html>
現(xiàn)在轉(zhuǎn)盤CSS部分基本完成。簡單寫一下JS部分。點(diǎn)擊中間的指針時，指針會轉(zhuǎn)，可以拉一條貝塞爾曲線，控制動畫的速度。
貝塞爾曲線可以簡單的看作是時間-距離曲線，斜率就是速度。因為轉(zhuǎn)盤的速度肯定是先快后慢，隨便拉一條。
http://cubic-bezier.com/#.2,.93,.43,1
css中添加屬性
.pointer {
// ...
transition: transform 3s cubic-bezier(.2,.93,.43,1);
}點(diǎn)擊開始抽獎的時候，為中間的指針加一個旋轉(zhuǎn)的角度。這里有一個問題就是不同的扇區(qū)抽到的概率是相同的，改成不同應(yīng)該…也蠻簡單的，不過主要是想練下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ī)角度獲取獎勵
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 === '謝謝參與' ? '很遺憾，您沒有獲得獎品。' : '恭喜獲得: ' + 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('抽獎結(jié)束');
onRotation = false;
result.style.display = 'block';
})現(xiàn)在一個抽獎轉(zhuǎn)盤基本完成了，最后一個需求，如果旁邊的等能夠亮起來就好了。
至于燈怎么亮，就需要用到CSS3的動畫了，我還不太熟悉，先去學(xué)習(xí)一下>_<
我學(xué)完回來了，參考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，內(nèi)容不是很多。
animation-name 指定動畫名稱，
animation-duration 指定動畫持續(xù)時間，
animation-timing-function 指定動畫函數(shù)，和transition的函數(shù)是一樣的，
animation-delay 指定動畫延遲多久后執(zhí)行，
animation-iteration-count 指定動畫執(zhí)行多少次，默認(rèn)為一次，可以指定為infinite，無限循環(huán)。
animation-direction 指定動畫多次播放時，一次結(jié)束，下一次怎么接上一次，如圖。
animation-fill-mode 指定動畫結(jié)束后停在什么位置，默認(rèn)回到起始狀態(tài)，forwards表示讓動畫停留在結(jié)束狀態(tài)，backwards讓動畫回到第一幀的狀態(tài)，both根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則。
animation-play-state 動畫執(zhí)行狀態(tài)，默認(rèn)為running，可以設(shè)置為pause，動畫將在當(dāng)前狀態(tài)停止，再改為running時，會接著上一次停止的位置繼續(xù)執(zhí)行動畫。
使用關(guān)鍵字 keyframes 來定義一個動畫。通過百分比指定其中任意幾個狀態(tài)。
嘗試著寫一下=。=
<!DOCTYPE html>
<html>
<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;
就相當(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 反正我只能寫成這樣了。
最后把動畫加到轉(zhuǎn)盤的燈上。完成代碼（好像顏色變了，咳，那是因為我animation學(xué)了太久都掉色了）：
<!DOCTYPE html>
<html>
<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>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span> 5 0 積分</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span>100元話費(fèi)</span>
</div>
</div>
<div>
<div>
<span> 5 0 積分</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span>100元話費(fèi)</span>
</div>
</div>
<div>
<div>
<span>謝謝參與</span>
</div>
</div>
<div>
<div>
<span> 5 0 積分</span>
</div>
</div>
<div>
<div>
<span>10元話費(fèi)</span>
</div>
</div>
<div>開始抽獎</div>
</div>
</div>
<div></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ī)角度獲取獎勵
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 === '謝謝參與' ? '很遺憾，您沒有獲得獎品。' : '恭喜獲得: ' + 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('抽獎結(jié)束');
setTimeout(() => { // 等閃爍三下結(jié)束
onRotation = false;
lights.forEach(light => { light.className = 'light'; });
result.style.display = 'block';
}, 300);
})
</script>
</body>
</html>關(guān)于“如何利用css實現(xiàn)一個抽獎動畫效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼