<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025年会抽奖大转盘</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
overflow-x: hidden;
}
/* 粒子背景 */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
}
/* 主容器 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 标题 */
.title {
text-align: center;
color: white;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.title h1 {
font-size: 3rem;
margin-bottom: 10px;
background: linear-gradient(45deg, #FFD700, #FFA500);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)); }
to { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)); }
}
.title p {
font-size: 1.2rem;
opacity: 0.9;
}
/* 主内容区 */
.main-content {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
/* 卡片样式 */
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.card h3 {
color: white;
margin-bottom: 20px;
font-size: 1.5rem;
text-align: center;
}
/* 抽奖转盘 */
.lottery-wheel {
text-align: center;
}
.wheel-container {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto 30px;
}
.wheel {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
background: conic-gradient(
#FF6B6B 0deg 72deg,
#4ECDC4 72deg 144deg,
#45B7D1 144deg 216deg,
#96CEB4 216deg 288deg,
#FECA57 288deg 360deg
);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.wheel::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.wheel-pointer {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #FFD700;
z-index: 5;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}
.wheel-text {
position: absolute;
color: white;
font-weight: bold;
font-size: 1.1rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
/* 按钮样式 */
.btn {
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.btn:active {
transform: translateY(-1px);
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.btn:hover::before {
left: 100%;
}
/* 参与人员列表 */
.participants {
max-height: 400px;
overflow-y: auto;
}
.participant-list {
display: grid;
gap: 10px;
}
.participant-item {
background: rgba(255, 255, 255, 0.1);
padding: 10px 15px;
border-radius: 10px;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.participant-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(5px);
}
.participant-item.winner {
background: linear-gradient(135deg, #FFD700, #FFA500);
color: black;
font-weight: bold;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* 奖品设置 */
.prizes {
max-height: 400px;
overflow-y: auto;
}
.prize-item {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
margin-bottom: 15px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.prize-content {
flex: 1;
}
.prize-name {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 5px;
}
.prize-desc {
font-size: 0.9rem;
opacity: 0.8;
}
/* 删除按钮 */
.delete-btn {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0.7;
margin-left: 10px;
flex-shrink: 0;
}
.delete-btn:hover {
opacity: 1;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}
.delete-btn:active {
transform: scale(0.95);
}
/* 输入框 */
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
color: white;
margin-bottom: 5px;
font-weight: bold;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1rem;
}
.input-group input::placeholder, .input-group textarea::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.input-group input:focus, .input-group textarea:focus {
outline: none;
border-color: #4ECDC4;
box-shadow: 0 0 10px rgba(78, 205, 196, 0.3);
}
/* 结果展示 */
.result-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.result-content {
background: linear-gradient(135deg, #667eea, #764ba2);
padding: 50px;
border-radius: 20px;
text-align: center;
color: white;
max-width: 500px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from { transform: scale(0.8) translateY(-50px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
.result-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
background: linear-gradient(45deg, #FFD700, #FFA500);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.result-content .winner-name {
font-size: 2rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.result-content .prize-name {
font-size: 1.5rem;
margin-bottom: 30px;
color: #FFD700;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
/* 响应式设计 */
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
gap: 20px;
}
.wheel-container {
width: 300px;
height: 300px;
}
.title h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- 粒子背景 -->
<div class="particles" id="particles"></div>
<div class="container">
<!-- 标题 -->
<div class="title">
<h1>🎉 2025年会抽奖大转盘 🎉</h1>
<p>祝愿大家新年快乐，好运连连！</p>
</div>
<!-- 主内容 -->
<div class="main-content">
<!-- 左侧：参与人员 -->
<div class="card">
<h3>🎯 参与人员</h3>
<div class="input-group">
<label>添加参与者：</label>
<input type="text" id="participantInput" placeholder="输入姓名">
</div>
<button class="btn" style="width: 100%; margin-bottom: 15px;">添加</button>
<div class="participants">
<div class="participant-list" id="participantList">
<div class="participant-item">张三</div>
<div class="participant-item">李四</div>
<div class="participant-item">王五</div>
<div class="participant-item">赵六</div>
<div class="participant-item">钱七</div>
<div class="participant-item">孙八</div>
<div class="participant-item">周九</div>
<div class="participant-item">吴十</div>
</div>
</div>
</div>
<!-- 中间：抽奖转盘 -->
<div class="card lottery-wheel">
<h3>🎰 抽奖转盘</h3>
<div class="wheel-container">
<div class="wheel-pointer"></div>
<div class="wheel" id="wheel">
<div class="wheel-text" style="top: 15%; left: 50%; transform: translateX(-50%);">一等奖</div>
<div class="wheel-text" style="top: 35%; right: 15%; transform: rotate(72deg);">二等奖</div>
<div class="wheel-text" style="bottom: 35%; right: 15%; transform: rotate(144deg);">三等奖</div>
<div class="wheel-text" style="bottom: 15%; left: 50%; transform: translateX(-50%) rotate(216deg);">参与奖</div>
<div class="wheel-text" style="top: 35%; left: 15%; transform: rotate(288deg);">特别奖</div>
</div>
</div>
<button class="btn" id="spinBtn">🎯 开始抽奖</button>
<div style="margin-top: 20px;">
<button class="btn" style="background: linear-gradient(135deg, #95a5a6, #7f8c8d);">🔄 重置</button>
</div>
</div>
<!-- 右侧：奖品设置 -->
<div class="card">
<h3>🏆 奖品设置</h3>
<div class="input-group">
<label>奖品名称：</label>
<input type="text" id="prizeNameInput" placeholder="输入奖品名称">
</div>
<div class="input-group">
<label>奖品描述：</label>
<textarea id="prizeDescInput" placeholder="输入奖品描述" rows="2"></textarea>
</div>
<button class="btn" style="width: 100%; margin-bottom: 15px;">添加奖品</button>
<div class="prizes" id="prizeList">
<div class="prize-item">
<div class="prize-content">
<div class="prize-name">🥇 一等奖</div>
<div class="prize-desc">iPhone 15 Pro Max 256GB</div>
</div>
<button class="delete-btn" title="删除">✕</button>
</div>
<div class="prize-item">
<div class="prize-content">
<div class="prize-name">🥈 二等奖</div>
<div class="prize-desc">iPad Air 128GB</div>
</div>
<button class="delete-btn" title="删除">✕</button>
</div>
<div class="prize-item">
<div class="prize-content">
<div class="prize-name">🥉 三等奖</div>
<div class="prize-desc">Apple Watch Series 9</div>
</div>
<button class="delete-btn" title="删除">✕</button>
</div>
<div class="prize-item">
<div class="prize-content">
<div class="prize-name">🎁 参与奖</div>
<div class="prize-desc">精美礼品一份</div>
</div>
<button class="delete-btn" title="删除">✕</button>
</div>
<div class="prize-item">
<div class="prize-content">
<div class="prize-name">⭐ 特别奖</div>
<div class="prize-desc">现金红包 1000元</div>
</div>
<button class="delete-btn" title="删除">✕</button>
</div>
</div>
</div>
</div>
</div>
<!-- 结果弹窗 -->
<div class="result-modal" id="resultModal">
<div class="result-content">
<h2>🎉 恭喜中奖！</h2>
<div class="winner-name" id="winnerName"></div>
<div class="prize-name" id="winnerPrize"></div>
<button class="btn">确定</button>
</div>
</div>
<script>
// 创建粒子背景
function createParticles() {
const particles = document.getElementById('particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 6 + 's';
particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
particles.appendChild(particle);
}
}
// 参与人员数组
let participants = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
// 奖品数组
let prizes = [
{ name: '🥇 一等奖', desc: 'iPhone 15 Pro Max 256GB', angle: 0 },
{ name: '🥈 二等奖', desc: 'iPad Air 128GB', angle: 72 },
{ name: '🥉 三等奖', desc: 'Apple Watch Series 9', angle: 144 },
{ name: '🎁 参与奖', desc: '精美礼品一份', angle: 216 },
{ name: '⭐ 特别奖', desc: '现金红包 1000元', angle: 288 }
];
// 添加参与者
function addParticipant() {
const input = document.getElementById('participantInput');
const name = input.value.trim();
if (name && !participants.includes(name)) {
participants.push(name);
input.value = '';
updateParticipantList();
}
}
// 更新参与者列表
function updateParticipantList() {
const list = document.getElementById('participantList');
list.innerHTML = '';
participants.forEach((name, index) => {
const item = document.createElement('div');
item.className = 'participant-item';
item.innerHTML = `
<span>${name}</span>
<button class="delete-btn" title="删除">✕</button>
`;
list.appendChild(item);
});
}
// 删除参与者
function removeParticipant(index) {
if (confirm(`确定要删除 "${participants[index]}" 吗？`)) {
participants.splice(index, 1);
updateParticipantList();
}
}
// 添加奖品
function addPrize() {
const nameInput = document.getElementById('prizeNameInput');
const descInput = document.getElementById('prizeDescInput');
const name = nameInput.value.trim();
const desc = descInput.value.trim();
if (name) {
const prizeItem = document.createElement('div');
prizeItem.className = 'prize-item';
prizeItem.innerHTML = `
<div class="prize-content">
<div class="prize-name">${name}</div>
<div class="prize-desc">${desc}</div>
</div>
<button class="delete-btn" title="删除">✕</button>
`;
document.getElementById('prizeList').appendChild(prizeItem);
nameInput.value = '';
descInput.value = '';
}
}
// 删除奖品
function removePrize(btn) {
const prizeItem = btn.parentElement;
const prizeName = prizeItem.querySelector('.prize-name').textContent;
if (confirm(`确定要删除奖品 "${prizeName}" 吗？`)) {
prizeItem.remove();
}
}
// 转盘抽奖
function spinWheel() {
if (participants.length === 0) {
alert('请先添加参与人员！');
return;
}
const wheel = document.getElementById('wheel');
const spinBtn = document.getElementById('spinBtn');
// 禁用按钮
spinBtn.disabled = true;
spinBtn.textContent = '抽奖中...';
// 随机选择获奖者和奖品
const winner = participants[Math.floor(Math.random() * participants.length)];
const prize = prizes[Math.floor(Math.random() * prizes.length)];
// 计算旋转角度
const spins = Math.floor(Math.random() * 5) + 10; // 10-14圈
const finalAngle = prize.angle + spins * 360;
// 应用旋转动画
wheel.style.transform = `rotate(${finalAngle}deg)`;
// 4秒后显示结果
setTimeout(() => {
showResult(winner, prize);
spinBtn.disabled = false;
spinBtn.textContent = '🎯 开始抽奖';
// 高亮获奖者
highlightWinner(winner);
}, 4000);
}
// 高亮获奖者
function highlightWinner(winner) {
const items = document.querySelectorAll('.participant-item');
items.forEach(item => {
item.classList.remove('winner');
const nameSpan = item.querySelector('span');
if (nameSpan && nameSpan.textContent === winner) {
item.classList.add('winner');
}
});
}
// 显示结果
function showResult(winner, prize) {
document.getElementById('winnerName').textContent = winner;
document.getElementById('winnerPrize').textContent = `获得 ${prize.name}`;
document.getElementById('resultModal').style.display = 'flex';
}
// 关闭结果弹窗
function closeResult() {
document.getElementById('resultModal').style.display = 'none';
}
// 重置抽奖
function resetLottery() {
document.getElementById('wheel').style.transform = 'rotate(0deg)';
document.querySelectorAll('.participant-item').forEach(item => {
item.classList.remove('winner');
});
}
// 监听回车键
document.getElementById('participantInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addParticipant();
}
});
// 初始化
document.addEventListener('DOMContentLoaded', function() {
createParticles();
updateParticipantList();
});
</script>
</body>
</html>
