抽獎是很多娛樂活動中常見的環節，今天我們將使用CSS來實現一個簡單的抽獎效果。

/* 定義獎品的樣式 */
.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;
}
/* 定義動畫效果 */
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* 定義抽獎框的樣式 */
.lottery {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
/* 定義抽獎按鈕的樣式 */
.lottery button {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
/* 定義選中狀態的樣式 */
.lottery .selected {
border: 5px solid red;
}
/* 實現點擊旋轉抽獎的功能 */
let prizes = document.querySelectorAll(".prize");
let btn = document.querySelector("button");
let selectedPrize;
btn.addEventListener("click", function() {
// 隨機選中一個獎品
selectedPrize = prizes[Math.floor(Math.random() * prizes.length)];
// 選中狀態
selectedPrize.classList.add("selected");
// 開始旋轉
document.querySelector(".lottery").style.animation = "rotate 5s ease forwards";
});

以上是使用CSS實現抽獎效果的代碼，我們定義了獎品的樣式、抽獎框的樣式、抽獎按鈕的樣式和選中狀態的樣式，并使用了動畫效果實現旋轉的效果。最后使用JavaScript實現點擊按鈕時隨機選中一個獎品并將其標記為選中狀態，并觸發旋轉效果。

通過這種方式，我們可以使用CSS和JavaScript來實現一個簡單的抽獎效果，使得整個抽獎過程更加生動，讓用戶體驗更加豐富。