要實現CSS轉盤抽獎,可以按照以下步驟進行操作:
<div class="roulette"></div>
.roulette {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 50%;
}
.roulette:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #ff0000;
transform-origin: 100% 50%;
transform: rotate(0deg);
border-radius: 100% 0 0 100%;
}
.roulette:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: #00ff00;
transform-origin: 0 50%;
transform: rotate(0deg);
border-radius: 0 100% 100% 0;
}
var roulette = document.querySelector('.roulette');
var angle = 0;
function rotateRoulette() {
angle += 45; // 每次旋轉45度
roulette.style.transform = 'rotate(' + angle + 'deg)';
}
// 調用rotateRoulette函數來旋轉轉盤
rotateRoulette();
以上就是實現CSS轉盤抽獎的基本步驟,根據具體需求可以進行進一步的樣式和交互優化。