CSS3 圓形抽獎

CSS3 圓形抽獎是指在網頁中添加一個可旋轉的圓形，并設置多個扇形分布在圓形上，每個扇形代表一個獎項。用戶點擊抽獎按鈕，圓形開始旋轉，最終停在一個扇形上，用戶獲得此扇形對應的獎品。

實現 CSS3 圓形抽獎的關鍵是利用 CSS3 的 transform 屬性，將扇形按照對應角度進行旋轉。具體步驟如下：

.circle {
/* 設置圓形大小 */
width: 100px;
height: 100px;
/* 設置圓形邊框 */
border: 2px solid #666;
border-radius: 50%;
/* 設置中心點位置 */
position: relative;
}
.item {
/* 設置扇形大小 */
width: 0;
height: 0;
border-width: 50px 50px 0;
border-style: solid;
border-color: #FF5722 transparent;
position: absolute;
top: 0;
left: 0;
/* 設置扇形旋轉角度 */
transform-origin: 100% 100%;
transform: rotate(30deg);
}

在 HTML 中，我們需要添加一個圓形和多個扇形元素，并設置每個扇形對應的角度和獎品：

一等獎
二等獎
三等獎
四等獎
五等獎
六等獎
七等獎
八等獎

在 JavaScript 中，我們需要監聽抽獎按鈕的點擊事件，并通過計算隨機角度和轉盤停止位置的角度差，將圓形旋轉至對應角度以實現抽獎功能。

使用 CSS3 圓形抽獎可以增加網頁的互動性和趣味性，提高用戶黏性和參與度。