抽獎(jiǎng)是很多娛樂(lè)活動(dòng)中常見(jiàn)的環(huán)節(jié)，今天我們將使用CSS來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的抽獎(jiǎng)效果。

/* 定義獎(jiǎng)品的樣式 */
.prize {
width: 80px;
height: 80px;
background-color: yellow;
border-radius: 50%;
text-align: center;
line-height: 80px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
/* 定義動(dòng)畫(huà)效果 */
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* 定義抽獎(jiǎng)框的樣式 */
.lottery {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
/* 定義抽獎(jiǎng)按鈕的樣式 */
.lottery button {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
/* 定義選中狀態(tài)的樣式 */
.lottery .selected {
border: 5px solid red;
}
/* 實(shí)現(xiàn)點(diǎn)擊旋轉(zhuǎn)抽獎(jiǎng)的功能 */
let prizes = document.querySelectorAll(".prize");
let btn = document.querySelector("button");
let selectedPrize;
btn.addEventListener("click", function() {
// 隨機(jī)選中一個(gè)獎(jiǎng)品
selectedPrize = prizes[Math.floor(Math.random() * prizes.length)];
// 選中狀態(tài)
selectedPrize.classList.add("selected");
// 開(kāi)始旋轉(zhuǎn)
document.querySelector(".lottery").style.animation = "rotate 5s ease forwards";
});

以上是使用CSS實(shí)現(xiàn)抽獎(jiǎng)效果的代碼，我們定義了獎(jiǎng)品的樣式、抽獎(jiǎng)框的樣式、抽獎(jiǎng)按鈕的樣式和選中狀態(tài)的樣式，并使用了動(dòng)畫(huà)效果實(shí)現(xiàn)旋轉(zhuǎn)的效果。最后使用JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕時(shí)隨機(jī)選中一個(gè)獎(jiǎng)品并將其標(biāo)記為選中狀態(tài)，并觸發(fā)旋轉(zhuǎn)效果。

通過(guò)這種方式，我們可以使用CSS和JavaScript來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的抽獎(jiǎng)效果，使得整個(gè)抽獎(jiǎng)過(guò)程更加生動(dòng)，讓用戶(hù)體驗(yàn)更加豐富。