我来为您创建一个精美的网页转盘摇奖HTML5页面，这个转盘将包含动画效果、音效提示和完整的抽奖逻辑。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">幸运大转盘 - 摇奖游戏</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;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
text-align: center;
position: relative;
z-index: 10;
}
h1 {
color: white;
font-size: 2.5em;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 10px #fff; }
to { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px #fff, 0 0 30px #fff; }
}
.wheel-container {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto;
}
.wheel {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
overflow: hidden;
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-section {
position: absolute;
width: 50%;
height: 50%;
transform-origin: right bottom;
overflow: hidden;
}
.wheel-section-inner {
position: absolute;
width: 200%;
height: 200%;
right: 0;
bottom: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.wheel-section:nth-child(1) { transform: rotate(0deg); }
.wheel-section:nth-child(1) .wheel-section-inner { background: #FF6B6B; transform: rotate(22.5deg); }
.wheel-section:nth-child(2) { transform: rotate(45deg); }
.wheel-section:nth-child(2) .wheel-section-inner { background: #4ECDC4; transform: rotate(22.5deg); }
.wheel-section:nth-child(3) { transform: rotate(90deg); }
.wheel-section:nth-child(3) .wheel-section-inner { background: #45B7D1; transform: rotate(22.5deg); }
.wheel-section:nth-child(4) { transform: rotate(135deg); }
.wheel-section:nth-child(4) .wheel-section-inner { background: #96CEB4; transform: rotate(22.5deg); }
.wheel-section:nth-child(5) { transform: rotate(180deg); }
.wheel-section:nth-child(5) .wheel-section-inner { background: #FECA57; transform: rotate(22.5deg); }
.wheel-section:nth-child(6) { transform: rotate(225deg); }
.wheel-section:nth-child(6) .wheel-section-inner { background: #DDA0DD; transform: rotate(22.5deg); }
.wheel-section:nth-child(7) { transform: rotate(270deg); }
.wheel-section:nth-child(7) .wheel-section-inner { background: #98D8C8; transform: rotate(22.5deg); }
.wheel-section:nth-child(8) { transform: rotate(315deg); }
.wheel-section:nth-child(8) .wheel-section-inner { background: #F7DC6F; transform: rotate(22.5deg); }
.pointer {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #FF4757;
z-index: 10;
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.3));
}
.center-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: white;
border-radius: 50%;
z-index: 5;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #333;
}
.spin-button {
margin-top: 40px;
padding: 15px 40px;
font-size: 20px;
font-weight: bold;
color: white;
background: linear-gradient(45deg, #FF6B6B, #FF4757);
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.spin-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.spin-button:active {
transform: translateY(0);
}
.spin-button:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.spin-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255,255,255,0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.spin-button:hover::before {
width: 300px;
height: 300px;
}
.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: 100;
}
.result-content {
background: white;
padding: 40px;
border-radius: 20px;
text-align: center;
max-width: 400px;
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.result-content h2 {
color: #333;
margin-bottom: 20px;
font-size: 2em;
}
.result-content p {
color: #666;
font-size: 1.2em;
margin-bottom: 30px;
}
.close-button {
padding: 10px 30px;
background: #667eea;
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.close-button:hover {
background: #5a67d8;
}
.confetti {
position: fixed;
width: 10px;
height: 10px;
background: #f0f;
position: absolute;
animation: confetti-fall 3s linear forwards;
}
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.history {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255,255,255,0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
max-width: 200px;
}
.history h3 {
color: #333;
margin-bottom: 10px;
font-size: 1.2em;
}
.history-item {
padding: 5px 0;
border-bottom: 1px solid #eee;
color: #666;
font-size: 14px;
}
.history-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<h1>🎉 幸运大转盘 🎉</h1>
<div class="wheel-container">
<div class="pointer"></div>
<div class="wheel" id="wheel">
<div class="wheel-section">
<div class="wheel-section-inner">一等奖<br>iPhone 15</div>
</div>
<div class="wheel-section">
<div class="wheel-section-inner">谢谢参与</div>
</div>
<div class="wheel-section">
<div class="wheel-section-inner">二等奖<br>iPad</div>
</div>
<div class="wheel-section">
<div class="wheel-section-inner">三等奖<br>AirPods</div>
</div>
<div class="wheel-section">
<div class="wheel-section-inner">四等奖<br>充电宝</div>
</div>
<div class="wheel-section">
<div class="wheel-section-inner">五等奖<br>优惠券</div>
</div>
<div class="wheel-section">
<div class="wheel-section-inner">六等奖<br>积分</div>
</div>
<div class="wheel-section">
<div class="wheel-section-inner">谢谢参与</div>
</div>
</div>
<div class="center-circle">GO</div>
</div>
<button class="spin-button" id="spinButton">开始抽奖</button>
</div>
<div class="history">
<h3>抽奖记录</h3>
<div id="historyList"></div>
</div>
<div class="result-modal" id="resultModal">
<div class="result-content">
<h2>🎊 恭喜您！</h2>
<p id="resultText"></p>
<button class="close-button" onclick="closeModal()">确定</button>
</div>
</div>
<script>
const wheel = document.getElementById('wheel');
const spinButton = document.getElementById('spinButton');
const resultModal = document.getElementById('resultModal');
const resultText = document.getElementById('resultText');
const historyList = document.getElementById('historyList');
const prizes = [
{ name: '一等奖 iPhone 15', probability: 0.01 },
{ name: '谢谢参与', probability: 0.2 },
{ name: '二等奖 iPad', probability: 0.05 },
{ name: '三等奖 AirPods', probability: 0.1 },
{ name: '四等奖 充电宝', probability: 0.15 },
{ name: '五等奖 优惠券', probability: 0.2 },
{ name: '六等奖 积分', probability: 0.29 },
{ name: '谢谢参与', probability: 0.2 }
];
let isSpinning = false;
let currentRotation = 0;
let history = [];
function getRandomPrize() {
const random = Math.random();
let cumulative = 0;
for (let prize of prizes) {
cumulative += prize.probability;
if (random <= cumulative) {
return prize;
}
}
return prizes[0];
}
function spin() {
if (isSpinning) return;
isSpinning = true;
spinButton.disabled = true;
spinButton.textContent = '抽奖中...';
const prize = getRandomPrize();
const prizeIndex = prizes.findIndex(p => p.name === prize.name);
// 计算旋转角度
const sectionAngle = 360 / prizes.length;
const targetAngle = 360 - (prizeIndex * sectionAngle + sectionAngle / 2);
const spins = 5 + Math.floor(Math.random() * 3);
const totalRotation = spins * 360 + targetAngle;
currentRotation += totalRotation;
wheel.style.transform = `rotate(${currentRotation}deg)`;
// 播放音效（使用Web Audio API创建简单的音效）
playSound();
// 4秒后显示结果
setTimeout(() => {
showResult(prize);
addToHistory(prize);
isSpinning = false;
spinButton.disabled = false;
spinButton.textContent = '再次抽奖';
}, 4000);
}
function playSound() {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.setValueAtTime(400, audioContext.currentTime);
oscillator.frequency.exponentialRampToValueAtTime(800, audioContext.currentTime + 0.1);
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.1);
}
function showResult(prize) {
resultText.textContent = `您获得了：${prize.name}`;
resultModal.style.display = 'flex';
if (prize.name.includes('一等奖') || prize.name.includes('二等奖')) {
createConfetti();
}
}
function closeModal() {
resultModal.style.display = 'none';
}
function createConfetti() {
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57', '#DDA0DD'];
for (let i = 0; i < 50; i++) {
setTimeout(() => {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = Math.random() * 0.5 + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}, i * 30);
}
}
function addToHistory(prize) {
const now = new Date();
const timeString = now.toLocaleTimeString();
history.unshift({ prize: prize.name, time: timeString });
if (history.length > 5) {
history.pop();
}
updateHistoryDisplay();
}
function updateHistoryDisplay() {
historyList.innerHTML = history.map(item =>
`<div class="history-item">${item.time} - ${item.prize}</div>`
).join('');
}
spinButton.addEventListener('click', spin);
// 点击模态框外部关闭
resultModal.addEventListener('click', (e) => {
if (e.target === resultModal) {
closeModal();
}
});
</script>
</body>
</html>
这个网页转盘摇奖系统具有以下特点：
🎯 主要功能
-
精美的视觉设计
- 渐变背景和发光标题效果
- 8个彩色扇形区域，每个都有不同的奖品
- 流畅的旋转动画效果
-
完整的抽奖逻辑
- 基于概率的奖品分配系统
- 防止重复点击的保护机制
- 真实的转盘旋转物理效果
-
交互体验
（图片来源网络，侵删）- 音效反馈（使用Web Audio API）
- 中奖后的弹窗提示
- 彩纸飘落特效（大奖时触发）
- 抽奖历史记录功能
-
奖品设置
- 一等奖：iPhone 15（1%概率）
- 二等奖：iPad（5%概率）
- 三等奖：AirPods（10%概率）
- 四等奖：充电宝（15%概率）
- 五等奖：优惠券（20%概率）
- 六等奖：积分（29%概率）
- 谢谢参与（20%概率）
🎨 设计亮点
- 响应式设计，适配各种屏幕
- 平滑的动画过渡效果
- 悬停和点击的视觉反馈
- 专业的配色方案
您可以直接保存这个HTML文件并在浏览器中打开使用，如果需要调整奖品内容、概率或样式,只需修改相应的代码部分即可。
