CSS3轉盤抽獎是一種可以在網站或應用程序中實現的交互式游戲,用于吸引用戶并增加互動性。以下是使用CSS3實現轉盤抽獎的步驟:
代碼示例: /* 在CSS3中定義轉盤的樣式 */ #roulette { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; position: relative; margin: 0 auto; } #roulette:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ddd; } /* 定義轉盤上的扇形 */ .roulette-section { width: 0; height: 0; border-style: solid; border-width: 150px 150px 0; border-color: #f00 transparent; position: absolute; top: 0; left: 0; transform-origin: 50% 150px; transform: rotate(0deg); transition: all 2s ease-out; } /* 隨機旋轉轉盤以選擇獲獎扇形 */ #roulette.rotated .roulette-section { transform: rotate(360deg); } /* jQuery代碼在單擊按鈕時隨機旋轉轉盤 */ $(function(){ $('#button').click(function(){ var deg = Math.floor(Math.random() * 360 + 360); $('#roulette').addClass('rotated'); setTimeout(function(){ $('#roulette').removeClass('rotated'); }, 2000); }); });
以上代碼將演示一個有紅色扇形的轉盤,并使用JavaScript隨機旋轉轉盤的方法。您可以使用不同的顏色和樣式來獲得不同的效果,增加用戶的期望和興趣。