html js css抽奖大转盘
时间: 2023-09-06 11:08:09 浏览: 164
好的,下面是一个简单的 HTML + CSS + JS 实现的抽奖大转盘示例,你可以根据自己的需求进行修改和优化。
HTML代码:
```html
<div class="wrapper">
<div class="rotate">
<div class="inner">
<div class="sec sec1"><span>1</span></div>
<div class="sec sec2"><span>2</span></div>
<div class="sec sec3"><span>3</span></div>
<div class="sec sec4"><span>4</span></div>
<div class="sec sec5"><span>5</span></div>
<div class="sec sec6"><span>6</span></div>
<div class="sec sec7"><span>7</span></div>
<div class="sec sec8"><span>8</span></div>
</div>
<div class="pointer"></div>
</div>
<button class="btn" onclick="rotate()">抽奖</button>
</div>
```
CSS代码:
```css
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
overflow: hidden;
}
.rotate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
transition: transform 6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.inner {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 50%;
background-color: #ffebcd;
overflow: hidden;
box-shadow: 0 0 20px #ccc;
transform: rotate(0deg);
}
.sec {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
overflow: hidden;
}
.sec1 {
transform: rotate(0deg);
background-color: #f00;
}
.sec2 {
transform: rotate(45deg);
background-color: #0f0;
}
.sec3 {
transform: rotate(90deg);
background-color: #00f;
}
.sec4 {
transform: rotate(135deg);
background-color: #f0f;
}
.sec5 {
transform: rotate(180deg);
background-color: #0ff;
}
.sec6 {
transform: rotate(225deg);
background-color: #f00;
}
.sec7 {
transform: rotate(270deg);
background-color: #0f0;
}
.sec8 {
transform: rotate(315deg);
background-color: #00f;
}
.sec span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 36px;
color: #fff;
}
.pointer {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin: -10px 0 0 -5px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #f00;
z-index: 10;
}
.btn {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
border-radius: 20px;
background-color: #f00;
color: #fff;
font-size: 24px;
cursor: pointer;
outline: none;
}
```
JS代码:
```javascript
function rotate() {
var rotate = document.querySelector('.rotate');
var pointer = document.querySelector('.pointer');
var btn = document.querySelector('.btn');
var deg = Math.floor(Math.random() * 360 + 360 * 5);
rotate.style.transform = 'rotate(' + deg + 'deg)';
btn.disabled = true;
setTimeout(function() {
btn.disabled = false;
alert('恭喜您获得了' + Math.floor(deg % 360 / 45 + 1) + '等奖!');
}, 6000);
}
```
在浏览器中打开该页面,点击“抽奖”按钮即可进行抽奖。注意,这个示例是随机选取一个奖项,如果需要更加具有实际意义的抽奖,需要在JS代码中进行相应的修改。
阅读全文