CSS轉盤抽獎是一種非常流行的互動形式,越來越多的網站和應用程序使用它來吸引用戶。這種抽獎方式使用CSS3的transform屬性來實現,非常簡單而且易于實現。下面是一些示例代碼。
.wheel { width: 200px; height: 200px; border-radius: 50%; position: relative; overflow: hidden; } .wheel .slice { position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform-origin: 100% 50%; } .wheel .slice1 { transform: rotate(0deg); background-color: #f44336; } .wheel .slice2 { transform: rotate(45deg); background-color: #2196f3; } .wheel .slice3 { transform: rotate(90deg); background-color: #4caf50; } .wheel .slice4 { transform: rotate(135deg); background-color: #9c27b0; } .wheel .slice5 { transform: rotate(180deg); background-color: #ffeb3b; } .wheel .slice6 { transform: rotate(225deg); background-color: #ff5722; } .wheel .slice7 { transform: rotate(270deg); background-color: #673ab7; } .wheel .slice8 { transform: rotate(315deg); background-color: #009688; }
上面的代碼定義了一個轉盤,包含8個扇形,在不同的角度上顯示不同的顏色。現在我們需要一個JavaScript函數來旋轉這個轉盤。
function spin() { var degrees = Math.floor(Math.random() * 360) + 720; $('.wheel').css({ 'transform': 'rotate(' + degrees + 'deg)', '-webkit-transform': 'rotate(' + degrees + 'deg)' }); }
這個函數將生成一個隨機旋轉角度,然后將它應用于轉盤的transform屬性。我們可以在HTML中添加一個按鈕來觸發這個函數。
現在,當用戶單擊按鈕時,轉盤將旋轉,并停止在一個隨機位置。
上一篇成都css