淘先锋技术网

首页 1 2 3 4 5 6 7

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中添加一个按钮来触发这个函数。

现在,当用户单击按钮时,转盘将旋转,并停止在一个随机位置。