css制作抽奖
CSS制作抽奖效果
使用CSS可以创建简单的抽奖转盘效果，主要通过动画和旋转实现。
基础抽奖转盘结构
HTML部分：
<div class="wheel">
<div class="wheel-item">奖品1</div>
<div class="wheel-item">奖品2</div>
<div class="wheel-item">奖品3</div>
<div class="wheel-item">奖品4</div>
<div class="wheel-item">奖品5</div>
<div class="wheel-item">奖品6</div>
</div>
<button class="spin-btn">开始抽奖</button>CSS样式与动画
.wheel {
width: 300px;
height: 300px;
border-radius: 50%;
position: relative;
overflow: hidden;
margin: 50px auto;
transition: transform 3s ease-out;
}
.wheel-item {
position: absolute;
width: 50%;
height: 50%;
transform-origin: 100% 100%;
left: 0;
top: 0;
text-align: center;
padding-top: 40px;
box-sizing: border-box;
}
/* 设置每个扇区的位置和颜色 */
.wheel-item:nth-child(1) {
transform: rotate(0deg) skewY(30deg);
background: #FF5252;
}
.wheel-item:nth-child(2) {
transform: rotate(60deg) skewY(30deg);
background: #FF4081;
}
/* 其他扇区类似设置... */
.spin-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
}JavaScript控制旋转
const wheel = document.querySelector('.wheel');
const spinBtn = document.querySelector('.spin-btn');
spinBtn.addEventListener('click', () => {
// 随机旋转角度 (5-10圈)
const randomAngle = 1800 + Math.floor(Math.random() * 1800);
wheel.style.transform = `rotate(${randomAngle}deg)`;
});高级抽奖效果优化
添加指针和中心点
.wheel::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background: white;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.pointer {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 30px solid #333;
z-index: 5;
}平滑停止效果
修改JavaScript部分：
spinBtn.addEventListener('click', () => {
// 禁用按钮防止重复点击
spinBtn.disabled = true;
// 初始快速旋转
let currentAngle = 0;
const speed = 30;
const slowDownThreshold = 1500; // 开始减速的旋转角度
function animate() {
currentAngle += speed;
wheel.style.transform = `rotate(${currentAngle}deg)`;
if(currentAngle < slowDownThreshold) {
requestAnimationFrame(animate);
} else {
// 减速阶段
const randomFinalAngle = 1800 + Math.floor(Math.random() * 1800);
const duration = 3000; // 减速持续时间
wheel.style.transition = `transform ${duration}ms cubic-bezier(0.17, 0.67, 0.21, 0.99)`;
wheel.style.transform = `rotate(${currentAngle + randomFinalAngle}deg)`;
// 动画结束后启用按钮
setTimeout(() => {
spinBtn.disabled = false;
}, duration);
}
}
requestAnimationFrame(animate);
});响应式设计调整
@media (max-width: 600px) {
.wheel {
width: 200px;
height: 200px;
}
.wheel-item {
font-size: 12px;
padding-top: 25px;
}
}这种方法创建了一个视觉上吸引人的抽奖转盘，包含平滑的旋转和减速效果，适用于网页活动页面。
