幸运抽奖 | 智能双模式抽奖系统

一个现代化、精美的HTML抽奖页面，采用新拟态+玻璃拟态+赛博朋克风格融合设计，支持名单抽奖和人数抽奖两种模式，并提供高级抽奖控制和震撼的庆祝效果。

✨ 核心功能

智能双模式抽奖系统

• 名单抽奖模式：用户输入参与者姓名（换行分隔），设置获奖人数
• 人数抽奖模式：智能生成参与者编号，支持自定义前缀和起始编号
• 无缝模式切换：带有滑动指示器的流畅过渡动画，切换时保持用户输入状态

高级抽奖控制系统

• 多重抽奖设置：支持分批次抽奖，可设置不同奖项等级
• 重复控制开关：精美的拟物化开关设计，带状态指示和触觉反馈
• 提示信息：操作成功、错误提示等，使用友好的非侵入式提示

"恭喜中奖"庆祝系统（核心亮点）

• 即时视觉冲击：全屏庆祝遮罩、震撼入场动画、触觉反馈
• 粒子爆发系统：金色粒子、彩色碎片、光点闪烁、烟花绽放
• 获奖者荣誉展示：3D获奖者卡片、个性化头像框、动态排名徽章
• 分级展示效果：根据排名显示不同的光环、图标和光效

🎨 视觉设计

• 背景系统：多层次渐变背景，添加动态星云效果和粒子漂浮
• 设计语言：新拟态 + 玻璃拟态 + 赛博朋克风格融合
• 光影系统：多光源照明效果，营造立体空间感
• 材质质感：金属、玻璃、霓虹等多种材质混合使用

升级配色体系

• 主色调：电光蓝（#00D9FF）、深空紫（#6C5CE7）、荧光粉（#FF10F0）
• 等级配色：钻石级（#B9F2FF）、黄金级（#FFD700）、白银级（#C0C0C0）、青铜级（#CD7F32）
• 情感色彩：成功绿（#00E676）、警告橙（#FF9500）、错误红（#FF1744）

🚀 技术栈

• 基础框架：HTML5 + CSS3 + 原生JavaScript
• 样式框架：Tailwind CSS（最新版本）
• 图标库：Font Awesome 6.0+
• 字体：Google Fonts（Inter + Noto Sans SC）
• 动画效果：CSS3 Animation + Web Animations API

📝 使用指南

基本使用

1. 打开 index.html 文件启动抽奖系统
2. 选择抽奖模式：名单抽奖或人数抽奖
3. 根据选择的模式填写相应的信息
4. 设置奖项等级和获奖人数
5. 点击"开始抽奖"按钮启动抽奖
6. 点击"停止抽奖"按钮结束抽奖并显示结果

高级功能

• 分批次抽奖：开启"分批次抽奖"开关，设置每批次人数，可多次抽取
• 重复控制：开启"允许重复中奖"开关，允许同一人多次中奖
• 抽奖历史：系统会记录每次抽奖的结果，方便查看历史记录

🎯 功能亮点

庆祝系统

当抽奖结束时，系统会自动触发庆祝效果，包括：

• 全屏庆祝遮罩
• 粒子爆发效果（金色粒子、彩色碎片、光点闪烁、烟花绽放）
• 3D获奖者卡片展示
• 分级荣誉展示（根据排名显示不同效果）

视觉体验

• 动态星云背景和粒子效果
• 流畅的过渡动画和微交互
• 新拟态和玻璃拟态设计风格
• 响应式布局，适配各种设备

📁 项目结构

lottery-page/
├── index.html          # 主页面
├── README.md           # 项目说明
└── assets/             # 资源文件夹
    ├── images/         # 图片资源
    ├── css/            # CSS样式文件
    └── js/             # JavaScript文件

🔧 本地运行

1. 克隆项目到本地：git clone https://github.com/yourusername/lottery-page.git
2. 打开 index.html 文件即可运行

🎨 自定义

修改背景

可以替换 index.html 文件中的背景图片链接，使用自己喜欢的背景。

修改颜色

可以在 index.html 文件的 Tailwind 配置中修改颜色变量，自定义主题色。

修改动画

可以在 index.html 文件的 CSS 部分修改动画效果，自定义庆祝动画。

📜 许可证

MIT License