<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python数据分析 - 智能抽奖系统</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-bg: #0a0e27;
--secondary-bg: #151932;
--accent-gold: #d4af37;
--accent-blue: #00d4ff;
--accent-purple: #7c3aed;
--text-primary: #ffffff;
--text-secondary: #94a3b8;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--primary-bg);
color: var(--text-primary);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
/* 背景动画 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
z-index: -1;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
position: relative;
z-index: 1;
}
header {
text-align: center;
margin-bottom: 60px;
animation: fadeInDown 1s ease-out;
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
.logo-section {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.python-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3776ab, #ffd43b);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: bold;
box-shadow: 0 10px 30px rgba(55, 118, 171, 0.3);
}
h1 {
font-size: 3rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
font-weight: 400;
letter-spacing: 0.5px;
}
.class-selector {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.class-btn {
padding: 15px 40px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
color: var(--text-primary);
font-size: 1.1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.class-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
transition: left 0.5s ease;
}
.class-btn:hover::before {
left: 100%;
}
.class-btn:hover {
background: rgba(212, 175, 55, 0.1);
border-color: var(--accent-gold);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}
.class-btn.active {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(124, 58, 237, 0.2));
border-color: var(--accent-gold);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}
.main-content {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 50px;
backdrop-filter: blur(20px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
animation: fadeInUp 1s ease-out 0.2s both;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.lottery-section {
text-align: center;
}
.lottery-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 40px;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.lottery-title::before,
.lottery-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
max-width: 200px;
}
.lottery-buttons {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.lottery-btn {
position: relative;
padding: 25px 50px;
background: linear-gradient(135deg, var(--secondary-bg), rgba(124, 58, 237, 0.2));
border: 2px solid transparent;
border-radius: 16px;
color: var(--text-primary);
font-size: 1.3rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
overflow: hidden;
min-width: 180px;
}
.lottery-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-purple));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.lottery-btn:hover::before {
opacity: 0.1;
}
.lottery-btn:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);
border-color: var(--accent-gold);
}
.lottery-btn:active {
transform: translateY(-2px);
}
.lottery-btn .btn-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 5px;
}
.lottery-btn .btn-text {
font-size: 1rem;
opacity: 0.9;
}
.result-container {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px;
min-height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.result-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, var(--accent-gold), transparent);
opacity: 0.05;
animation: rotate 20s linear infinite;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
.result-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 2px;
}
.winner-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
z-index: 1;
}
.winner-item {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(124, 58, 237, 0.1));
border: 1px solid var(--accent-gold);
border-radius: 16px;
padding: 25px 35px;
min-width: 200px;
transform: scale(0);
animation: scaleIn 0.6s ease-out forwards;
position: relative;
backdrop-filter: blur(10px);
box-shadow: 0 15px 35px rgba(212, 175, 55, 0.2);
}
@keyframes scaleIn {
0% { transform: scale(0) rotate(-10deg); opacity: 0; }
50% { transform: scale(1.1) rotate(5deg); }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.winner-item::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--accent-gold), var(--accent-blue), var(--accent-purple));
border-radius: 16px;
opacity: 0.5;
z-index: -1;
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.winner-name {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}
.winner-id {
font-family: 'JetBrains Mono', monospace;
font-size: 0.9rem;
color: var(--text-secondary);
opacity: 0.8;
}
.rolling {
animation: pulse 0.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.loading-text {
font-size: 1.3rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 10px;
}
.loading-dots {
display: flex;
gap: 5px;
}
.loading-dots span {
width: 8px;
height: 8px;
background: var(--accent-gold);
border-radius: 50%;
animation: bounce 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: var(--accent-gold);
border-radius: 50%;
opacity: 0.3;
animation: float 10s infinite linear;
}
@keyframes float {
from { transform: translateY(100vh) rotate(0deg); }
to { transform: translateY(-100vh) rotate(360deg); }
}
.footer {
text-align: center;
margin-top: 50px;
color: var(--text-secondary);
font-size: 0.9rem;
opacity: 0.7;
}
@media (max-width: 768px) {
h1 { font-size: 2rem; }
.main-content { padding: 30px 20px; }
.lottery-btn { padding: 20px 30px; min-width: 150px; }
.lottery-btn .btn-number { font-size: 2rem; }
.winner-item { min-width: 150px; padding: 20px 25px; }
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="container">
<header>
<div class="logo-section">
<div class="python-icon">Py</div>
<h1>经济大数据分析课堂抽奖</h1>
</div>
<p class="subtitle">智能抽奖系统 · 数据驱动决策</p>
</header>
<section class="class-selector">
<button class="class-btn active" data-class="1">经济1班</button>
<button class="class-btn" data-class="2">经济2班</button>
<button class="class-btn" data-class="3">经济3班</button>
</section>
<main class="main-content">
<section class="lottery-section">
<h2 class="lottery-title">
<span>⚡</span>
智能抽奖算法
<span>⚡</span>
</h2>
<div class="lottery-buttons">
<button class="lottery-btn" data-count="1">
<span class="btn-number">1</span>
<span class="btn-text">抽1名</span>
</button>
<button class="lottery-btn" data-count="2">
<span class="btn-number">2</span>
<span class="btn-text">抽2名</span>
</button>
<button class="lottery-btn" data-count="3">
<span class="btn-number">3</span>
<span class="btn-text">抽3名</span>
</button>
</div>
<div class="result-container">
<div class="result-title">中奖名单</div>
<div class="winner-list" id="winnerList">
<div class="loading-text">
<span>选择抽奖数量开始</span>
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<p>© 2025-2026 经济大数据分析课程 | 高级智能抽奖系统 v2.0</p>
</footer>
</div>
<script>
// 学生数据
const students = {
1: [
{ id: '20220102063', name: '代诗佳' },
{ id: '20230102001', name: '王政' },
{ id: '20230102003', name: '韩一萱' },
{ id: '20230102004', name: '陈觊祥' },
{ id: '20230102007', name: '廖其辉' },
{ id: '20230102009', name: '王梦婷' },
{ id: '20230102012', name: '陈怡超' },
{ id: '20230102013', name: '张晶玲' },
{ id: '20230102014', name: '汤磊' },
{ id: '20230102015', name: '杨豪' },
{ id: '20230102024', name: '池雨晨' },
{ id: '20230102025', name: '周嫣秋' },
{ id: '20230102029', name: '邓捷' },
{ id: '20230102030', name: '杨晓森' },
{ id: '20230102032', name: '李佳璐' },
{ id: '20230102040', name: '卢华' },
{ id: '20230102043', name: '张燚' },
{ id: '20230102044', name: '肖航' },
{ id: '20230102045', name: '石冉藤' },
{ id: '20230102046', name: '罗华迅' },
{ id: '20230102051', name: '彭法云' },
{ id: '20230102054', name: '何冬梅' },
{ id: '20230102061', name: '侯倩雯' },
{ id: '20230102064', name: '朱梦媛' },
{ id: '20230102070', name: '张树素' },
{ id: '20230102071', name: '方滢茜' },
{ id: '20230102072', name: '舒万月' },
{ id: '20230102073', name: '吴香' },
{ id: '20230102074', name: '许娟' },
{ id: '20230102075', name: '冷沄霞' },
{ id: '20230102076', name: '赵静' },
{ id: '20230102084', name: '赵秤瑛' },
{ id: '20230102089', name: '张露丹' },
{ id: '20230102090', name: '万玲江' },
{ id: '20230102096', name: '何苗' },
{ id: '20230102105', name: '刘雨婷' }
],
2: [
{ id: '20230102002', name: '李佳衡' },
{ id: '20230102005', name: '周霖' },
{ id: '20230102006', name: '蔡秋颜' },
{ id: '20230102008', name: '邱雨欣' },
{ id: '20230102011', name: '黄文宇' },
{ id: '20230102016', name: '黄俊杰' },
{ id: '20230102017', name: '陈壕' },
{ id: '20230102018', name: '谢钰佳' },
{ id: '20230102021', name: '张津瑕' },
{ id: '20230102022', name: '王艳' },
{ id: '20230102023', name: '何袁凤' },
{ id: '20230102026', name: '陈俐君' },
{ id: '20230102027', name: '张伟' },
{ id: '20230102028', name: '杨金宏' },
{ id: '20230102031', name: '王金平' },
{ id: '20230102033', name: '邓江宏' },
{ id: '20230102034', name: '黄雨欣' },
{ id: '20230102035', name: '廖兴怡' },
{ id: '20230102036', name: '刘琳' },
{ id: '20230102037', name: '伍银芳' },
{ id: '20230102038', name: '卜苑' },
{ id: '20230102039', name: '李娇' },
{ id: '20230102041', name: '夏裕鑫' },
{ id: '20230102042', name: '向东山' },
{ id: '20230102047', name: '唐搏含' },
{ id: '20230102048', name: '何钰琦' },
{ id: '20230102050', name: '冉虹曦' },
{ id: '20230102052', name: '牟宗玲' },
{ id: '20230102053', name: '段海燕' },
{ id: '20230102056', name: '孙浩然' },
{ id: '20230102060', name: '崔骏驰' },
{ id: '20230102063', name: '彭源清' },
{ id: '20230102065', name: '张成豪' },
{ id: '20230102068', name: '向虹宇' },
{ id: '20230102097', name: '刘一' },
{ id: '20230102099', name: '冉福雍' }
],
3: [
{ id: '20230102010', name: '张淑媚' },
{ id: '20230102019', name: '李荣炆' },
{ id: '20230102020', name: '杨琬婷' },
{ id: '20230102057', name: '白鑫粝' },
{ id: '20230102058', name: '李亚潼' },
{ id: '20230102059', name: '王茹晶' },
{ id: '20230102062', name: '张婉婉' },
{ id: '20230102066', name: '陈钊邦' },
{ id: '20230102067', name: '陈康' },
{ id: '20230102069', name: '毛文翰' },
{ id: '20230102077', name: '陶美伶' },
{ id: '20230102078', name: '周心雨' },
{ id: '20230102079', name: '张国励' },
{ id: '20230102080', name: '席语晗' },
{ id: '20230102081', name: '杨铖鑫' },
{ id: '20230102082', name: '廖丹' },
{ id: '20230102083', name: '谢语' },
{ id: '20230102085', name: '欧阳莉' },
{ id: '20230102086', name: '袁文兵' },
{ id: '20230102087', name: '董袁媛' },
{ id: '20230102088', name: '谷东升' },
{ id: '20230102091', name: '徐乾伟' },
{ id: '20230102092', name: '李金龙' },
{ id: '20230102094', name: '吕世航' },
{ id: '20230102095', name: '周传明' },
{ id: '20230102098', name: '张颖' },
{ id: '20230102100', name: '刘颖' },
{ id: '20230102101', name: '田桌琴' },
{ id: '20230102102', name: '王俊超' },
{ id: '20230102103', name: '李丹' },
{ id: '20230102104', name: '李林狼' },
{ id: '20230102106', name: '蒋婷' },
{ id: '20230102107', name: '李兴林' },
{ id: '20230102109', name: '赵晗妤' }
]
};
let currentClass = 1;
let isDrawing = false;
// 创建背景粒子
function createParticles() {
const particlesContainer = 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.animationDelay = Math.random() * 10 + 's';
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
particlesContainer.appendChild(particle);
}
}
// 班级选择
document.querySelectorAll('.class-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.class-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
currentClass = parseInt(this.dataset.class);
resetResult();
});
});
// 抽奖按钮
document.querySelectorAll('.lottery-btn').forEach(btn => {
btn.addEventListener('click', function() {
if (isDrawing) return;
const count = parseInt(this.dataset.count);
startLottery(count);
});
});
function startLottery(count) {
isDrawing = true;
const winnerList = document.getElementById('winnerList');
// 显示加载动画
winnerList.innerHTML = `
<div class="loading-text rolling">
<span>正在运行抽奖算法</span>
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
`;
// 模拟算法运行时间
setTimeout(() => {
const winners = selectWinners(count);
displayWinners(winners);
isDrawing = false;
}, 2000);
}
function selectWinners(count) {
const classStudents = [...students[currentClass]];
const winners = [];
for (let i = 0; i < count; i++) {
const randomIndex = Math.floor(Math.random() * classStudents.length);
winners.push(classStudents.splice(randomIndex, 1)[0]);
}
return winners;
}
function displayWinners(winners) {
const winnerList = document.getElementById('winnerList');
winnerList.innerHTML = '';
winners.forEach((winner, index) => {
setTimeout(() => {
const winnerItem = document.createElement('div');
winnerItem.className = 'winner-item';
winnerItem.style.animationDelay = `${index * 0.3}s`;
winnerItem.innerHTML = `
<div class="winner-name">${winner.name}</div>
<div class="winner-id">${winner.id}</div>
`;
winnerList.appendChild(winnerItem);
// 添加发光效果
createGlowEffect(winnerItem);
}, index * 400);
});
}
function createGlowEffect(element) {
const glow = document.createElement('div');
glow.style.cssText = `
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);
transform: translate(-50%, -50%);
border-radius: 16px;
animation: glowPulse 2s ease-in-out;
pointer-events: none;
`;
element.appendChild(glow);
setTimeout(() => glow.remove(), 2000);
}
function resetResult() {
const winnerList = document.getElementById('winnerList');
winnerList.innerHTML = `
<div class="loading-text">
<span>选择抽奖数量开始</span>
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
`;
}
// 添加发光脉冲动画
const style = document.createElement('style');
style.textContent = `
@keyframes glowPulse {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}
`;
document.head.appendChild(style);
// 初始化
createParticles();
</script>
</body>
</html>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>