css+纯+转盘抽奖,<赞>纯css实现转盘抽奖效果

【实例简介】

【实例截图】

【核心代码】

幸运大转盘

* { /* 重置默认样式 */

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; }

}

谢谢参与

5 0 积分

谢谢参与

100元话费

5 0 积分

谢谢参与

100元话费

谢谢参与

5 0 积分

10元话费

开始抽奖

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; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了

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);

})