CSS實現轉盤抽獎，是一種非常有趣的交互形式。下面我將介紹如何使用CSS實現這個效果。

.prize-wheel {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 10px solid #f1f1f1;
border-radius: 50%;
background: #fefefe;
}
.spin {
animation-name: spin;
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-iteration-count: 1;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.prize {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: #ff3300;
color: #fff;
font-size: 18px;
text-align: center;
transform-origin: 50% 200px;
}
.prize-1 {
transform: rotate(30deg);
}
.prize-2 {
transform: rotate(60deg);
}
.prize-3 {
transform: rotate(90deg);
}
.prize-4 {
transform: rotate(120deg);
}
.prize-5 {
transform: rotate(150deg);
}
.prize-6 {
transform: rotate(180deg);
}
.prize-7 {
transform: rotate(210deg);
}
.prize-8 {
transform: rotate(240deg);
}
.prize-9 {
transform: rotate(270deg);
}
.prize-10 {
transform: rotate(300deg);
}
.prize-11 {
transform: rotate(330deg);
}
.btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 40px;
border-radius: 20px;
background: #ff3300;
color: #fff;
text-align: center;
line-height: 40px;
cursor: pointer;
}

首先，我們需要一個容器來包裹整個“轉盤”，用

來表示。

轉盤上有幾個獎品，每個獎品需要對應一個

樣式，其中prize-1的數字對應每個獎品的位置。

接下來，我們需要一個按鈕來觸發“抽獎”效果。用

來表示。

最后，使用animation和transform屬性來完成旋轉效果，點擊按鈕時改變類名來觸發“抽獎”效果。