html5大转盘抽奖特效代码
时间: 2023-09-16 11:03:22 浏览: 105
HTML5大转盘抽奖特效可以通过HTML、CSS和JavaScript来实现。以下是一个简单的示例代码:
HTML部分:
```html
<div class="container">
<div class="wheel">
<div class="slice" style="background-color: #ff4f4f;">奖品1</div>
<div class="slice" style="background-color: #ffaf4f;">奖品2</div>
<div class="slice" style="background-color: #ffff4f;">奖品3</div>
<div class="slice" style="background-color: #4fff4f;">奖品4</div>
<div class="slice" style="background-color: #4fffd4;">奖品5</div>
<div class="slice" style="background-color: #4f8fff;">奖品6</div>
</div>
<button class="spin">开始抽奖</button>
</div>
```
CSS部分:
```css
.container {
position: relative;
width: 500px;
height: 500px;
}
.wheel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(0deg);
transform-origin: center center;
transition: transform 3s ease-out;
}
.slice {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 500px;
font-size: 24px;
font-weight: bold;
color: white;
}
.spin {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
font-size: 20px;
}
```
JavaScript部分:
```javascript
document.querySelector(".spin").addEventListener("click", function() {
var wheel = document.querySelector(".wheel");
var randomDeg = Math.floor(Math.random() * 360 + 720);
wheel.style.transform = "rotate(" + randomDeg + "deg)";
setTimeout(function() {
var slices = document.querySelectorAll(".slice");
var result = slices[parseInt((randomDeg % 360) / (360 / slices.length))];
alert("恭喜您,中奖了!奖品是:" + result.innerText);
}, 3000);
});
```
这段代码中,我们首先定义了一个包含了大转盘和一个开始抽奖按钮的容器。大转盘由若干个奖品块(slice)组成,每个奖品块的背景颜色不同。然后,我们使用CSS实现了大转盘自动旋转的效果。在JavaScript部分,我们通过监听开始抽奖按钮的点击事件,随机生成一个旋转角度,然后使用CSS的`transform`属性实现大转盘的旋转,并将结果保存在变量result中。最后,我们通过`setTimeout`函数实现3秒延迟后弹出中奖提示,并将中奖奖品显示出来。