源码介绍
- 视觉设计：采用了红色和金色的主题色彩，营造出喜庆和幸运的氛围，符合抽奖活动的调性。
- 交互功能：
- 点击 “开始抽奖” 按钮后，转盘会旋转 5 秒钟
- 旋转结束后，会弹出中奖结果弹窗
- 页面顶部显示活动公告，实时更新中奖信息
- 获奖名单区域有自动滚动效果
- 响应式设计：适配不同屏幕尺寸，在手机和桌面设备上都能良好显示
- 动画效果：转盘旋转采用平滑过渡动画，弹窗有淡入淡出效果
- 信息展示：清晰显示用户的抽奖次数、奖品信息和活动规则
源码展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幸运大转盘 - 微信抽奖活动</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#E63946',
secondary: '#FFD700',
accent: '#F1C40F',
dark: '#C41E3A',
light: '#FFE4E1',
},
fontFamily: {
sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
},
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.rotate-reset {
transform: rotate(0deg);
}
.prize-item {
position: absolute;
width: 50%;
height: 50%;
transform-origin: bottom right;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
text-align: center;
}
.prize-text {
transform-origin: center;
transform: rotate(45deg);
width: 80%;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
}
</style>
</head>
<body class="bg-gradient-to-br from-red-50 to-pink-50 min-h-screen font-sans">
<!-- 顶部导航 -->
<header class="bg-primary text-white shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-gift text-secondary text-xl"></i>
<h1 class="text-xl font-bold">幸运大转盘</h1>
</div>
<div class="flex items-center space-x-4">
<span class="hidden md:inline-block">活动时间: 2025.07.01-2025.07.31</span>
<button class="bg-secondary text-primary px-3 py-1 rounded-full text-sm font-bold hover:bg-opacity-80 transition">
<i class="fa fa-info-circle mr-1"></i>活动规则
</button>
</div>
</div>
</header>
<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
<!-- 活动信息 -->
<div class="bg-white rounded-xl shadow-lg p-4 mb-6">
<div class="flex items-center justify-between mb-3">
<h2 class="text-lg font-bold text-primary flex items-center">
<i class="fa fa-bullhorn mr-2"></i>活动公告
</h2>
<span class="text-xs text-gray-500">今天 12:30 更新</span>
</div>
<p class="text-gray-700 text-sm">恭喜用户<span class="text-primary font-bold">幸运星</span>获得了一等奖iPhone 15 Pro Max！</p>
</div>
<!-- 转盘区域 -->
<div class="relative mb-8">
<div class="aspect-square max-w-md mx-auto relative">
<!-- 转盘背景 -->
<div class="absolute inset-0 bg-gradient-to-br from-primary to-dark rounded-full shadow-2xl border-4 border-secondary overflow-hidden">
<!-- 转盘分区 - 使用CSS旋转实现 -->
<div class="prize-item bg-red-500/80" style="transform: rotate(0deg);">
<div class="prize-text text-white" style="transform: rotate(45deg);">
<i class="fa fa-mobile-phone text-2xl mb-1"></i><br>iPhone 15 Pro
</div>
</div>
<div class="prize-item bg-red-600/80" style="transform: rotate(45deg);">
<div class="prize-text text-white" style="transform: rotate(90deg);">
<i class="fa fa-tablet text-2xl mb-1"></i><br>iPad Mini
</div>
</div>
<div class="prize-item bg-red-500/80" style="transform: rotate(90deg);">
<div class="prize-text text-white" style="transform: rotate(135deg);">
<i class="fa fa-headphones text-2xl mb-1"></i><br>AirPods Pro
</div>
</div>
<div class="prize-item bg-red-600/80" style="transform: rotate(135deg);">
<div class="prize-text text-white" style="transform: rotate(180deg);">
<i class="fa fa-gift text-2xl mb-1"></i><br>50元红包
</div>
</div>
<div class="prize-item bg-red-500/80" style="transform: rotate(180deg);">
<div class="prize-text text-white" style="transform: rotate(225deg);">
<i class="fa fa-coffee text-2xl mb-1"></i><br>星巴克券
</div>
</div>
<div class="prize-item bg-red-600/80" style="transform: rotate(225deg);">
<div class="prize-text text-white" style="transform: rotate(270deg);">
<i class="fa fa-ticket text-2xl mb-1"></i><br>电影票
</div>
</div>
<div class="prize-item bg-red-500/80" style="transform: rotate(270deg);">
<div class="prize-text text-white" style="transform: rotate(315deg);">
<i class="fa fa-star text-2xl mb-1"></i><br>20积分
</div>
</div>
<div class="prize-item bg-red-600/80" style="transform: rotate(315deg);">
<div class="prize-text text-white" style="transform: rotate(0deg);">
<i class="fa fa-smile-o text-2xl mb-1"></i><br>谢谢参与
</div>
</div>
</div>
<!-- 转盘中心和指针 -->
<div id="wheel-container" class="absolute inset-0 flex items-center justify-center">
<!-- 中心固定点 -->
<div class="absolute w-12 h-12 bg-secondary rounded-full shadow-lg flex items-center justify-center z-20">
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
<i class="fa fa-diamond text-white text-xl"></i>
</div>
</div>
<!-- 转盘 -->
<div id="wheel" class="absolute inset-8 transition-transform duration-5000 ease-out rounded-full">
<!-- 转盘内容已在背景中定义 -->
</div>
<!-- 指针 -->
<div class="absolute top-0 w-16 h-10 bg-secondary rounded-t-full shadow-lg flex items-center justify-center z-30 transform -translate-y-4">
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
<i class="fa fa-caret-up text-white text-xl"></i>
</div>
</div>
</div>
<!-- 开始按钮 -->
<div class="absolute inset-0 flex items-center justify-center">
<button id="spin-btn" class="w-20 h-20 bg-secondary rounded-full shadow-lg flex items-center justify-center z-40 hover:bg-opacity-90 active:scale-95 transition-all duration-300 cursor-pointer">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center">
<span class="text-white font-bold text-lg">开始抽奖</span>
</div>
</button>
</div>
</div>
</div>
<!-- 抽奖信息 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
<div class="bg-white rounded-xl shadow-md p-4 flex items-center">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
<i class="fa fa-trophy text-primary text-xl"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">我的奖品</h3>
<p class="text-gray-600 text-sm">暂无中奖记录</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-4 flex items-center">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
<i class="fa fa-refresh text-primary text-xl"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">今日剩余次数</h3>
<p class="text-primary font-bold">3/3</p>
</div>
</div>
</div>
<!-- 获奖名单 -->
<div class="bg-white rounded-xl shadow-lg p-4 mb-8">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold text-primary flex items-center">
<i class="fa fa-list-alt mr-2"></i>获奖名单
</h2>
<a href="#" rel="external nofollow" class="text-sm text-primary hover:underline">查看更多</a>
</div>
<div class="overflow-hidden">
<ul id="winners-list" class="text-sm text-gray-700 space-y-2 animate-scroll">
<li class="flex justify-between items-center">
<span><i class="fa fa-user-circle-o mr-1 text-primary"></i>张三</span>
<span class="font-bold text-secondary">获得了iPhone 15 Pro</span>
<span class="text-gray-400">10分钟前</span>
</li>
<li class="flex justify-between items-center">
<span><i class="fa fa-user-circle-o mr-1 text-primary"></i>李四</span>
<span class="font-bold text-secondary">获得了AirPods Pro</span>
<span class="text-gray-400">30分钟前</span>
</li>
<li class="flex justify-between items-center">
<span><i class="fa fa-user-circle-o mr-1 text-primary"></i>王五</span>
<span class="font-bold text-secondary">获得了50元红包</span>
<span class="text-gray-400">1小时前</span>
</li>
<li class="flex justify-between items-center">
<span><i class="fa fa-user-circle-o mr-1 text-primary"></i>赵六</span>
<span class="font-bold text-secondary">获得了iPad Mini</span>
<span class="text-gray-400">2小时前</span>
</li>
</ul>
</div>
</div>
<!-- 活动规则 -->
<div class="bg-white rounded-xl shadow-lg p-4 mb-8">
<h2 class="text-lg font-bold text-primary flex items-center mb-3">
<i class="fa fa-book mr-2"></i>活动规则
</h2>
<ul class="text-sm text-gray-700 space-y-2 list-disc pl-5">
<li>活动时间：2025年7月1日至2025年7月31日</li>
<li>每位用户每天有3次抽奖机会</li>
<li>奖品将在中奖后3个工作日内发放</li>
<li>实物奖品将通过快递方式寄出，请填写正确的收货地址</li>
<li>红包和优惠券将直接发放到您的账户</li>
<li>本活动最终解释权归主办方所有</li>
</ul>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-6">
<div class="container mx-auto px-4 text-center text-sm">
<p class="mb-2">© 2025 幸运大转盘活动 版权所有</p>
<p>活动最终解释权归主办方所有</p>
</div>
</footer>
<!-- 抽奖结果弹窗 -->
<div id="result-modal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-2xl p-6 max-w-md w-full mx-4 transform transition-all scale-95 opacity-0" id="modal-content">
<div class="text-center mb-4">
<div class="w-20 h-20 bg-primary/10 rounded-full mx-auto flex items-center justify-center mb-4">
<i class="fa fa-gift text-primary text-3xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">恭喜您中奖了！</h3>
<p class="text-gray-600" id="prize-text">您获得了iPhone 15 Pro！</p>
</div>
<div class="flex space-x-3">
<button id="close-modal" class="flex-1 py-3 bg-gray-200 text-gray-800 rounded-lg font-bold hover:bg-gray-300 transition">
关闭
</button>
<button class="flex-1 py-3 bg-primary text-white rounded-lg font-bold hover:bg-dark transition">
查看奖品
</button>
</div>
</div>
</div>
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
const spinBtn = document.getElementById('spin-btn');
const wheel = document.getElementById('wheel');
const resultModal = document.getElementById('result-modal');
const modalContent = document.getElementById('modal-content');
const closeModal = document.getElementById('close-modal');
const prizeText = document.getElementById('prize-text');
let isSpinning = false;
// 奖品配置
const prizes = [
"iPhone 15 Pro",
"iPad Mini",
"AirPods Pro",
"50元红包",
"星巴克券",
"电影票",
"20积分",
"谢谢参与"
];
// 旋转转盘
spinBtn.addEventListener('click', function() {
if (isSpinning) return;
// 模拟消耗抽奖次数
let remaining = parseInt(document.querySelector('.text-primary.font-bold').textContent.split('/')[0]);
if (remaining <= 0) {
alert('您今天的抽奖次数已用完！');
return;
}
isSpinning = true;
spinBtn.disabled = true;
spinBtn.classList.add('opacity-70');
// 随机旋转角度 (5-10圈 + 随机角度)
const randomDegree = 1800 + Math.floor(Math.random() * 1800) + Math.floor(Math.random() * 360);
// 应用旋转
wheel.style.transform = `rotate(${randomDegree}deg)`;
// 旋转结束后显示结果
setTimeout(function() {
isSpinning = false;
spinBtn.disabled = false;
spinBtn.classList.remove('opacity-70');
// 更新剩余次数
remaining--;
document.querySelector('.text-primary.font-bold').textContent = `${remaining}/3`;
// 计算中奖位置 (根据最终角度)
const normalizedDegree = randomDegree % 360;
const prizeIndex = Math.floor(((360 - normalizedDegree) % 360) / 45);
const prize = prizes[prizeIndex];
// 更新奖品文本
prizeText.textContent = `您获得了${prize}！`;
// 显示弹窗
resultModal.classList.remove('hidden');
setTimeout(() => {
modalContent.classList.remove('scale-95', 'opacity-0');
modalContent.classList.add('scale-100', 'opacity-100');
}, 10);
}, 5000); // 5秒后显示结果，与旋转动画持续时间一致
});
// 关闭弹窗
closeModal.addEventListener('click', function() {
modalContent.classList.remove('scale-100', 'opacity-100');
modalContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
resultModal.classList.add('hidden');
}, 300);
});
// 点击弹窗外部关闭
resultModal.addEventListener('click', function(e) {
if (e.target === resultModal) {
closeModal.click();
}
});
// 获奖名单滚动动画
const winnersList = document.getElementById('winners-list');
let scrollPosition = 0;
const scrollSpeed = 1;
function animateScroll() {
scrollPosition += scrollSpeed;
if (scrollPosition >= winnersList.scrollHeight - winnersList.clientHeight) {
scrollPosition = 0;
}
winnersList.scrollTop = scrollPosition;
requestAnimationFrame(animateScroll);
}
// 如果有足够的内容才开始滚动
if (winnersList.scrollHeight > winnersList.clientHeight) {
animateScroll();
}
});
</script>
</body>
</html>
成品截图
