体验链接： 春节倒计时 - 烟花盛宴
# 春节倒计时烟花 - 项目说明
## 项目简介
春节倒计时烟花是一个充满节日氛围的互动网页应用，为用户提供倒计时功能和绚丽的烟花体验。用户可以实时查看距离春节的剩余时间，点击屏幕或按钮放烟花，还可以输入新年愿望，让愿望化作烟花绽放在夜空中。
界面采用紫色渐变背景配合金色发光文字，营造出神秘而温馨的春节氛围。烟花效果绚丽多彩，支持点击触发和自动播放，让用户在等待春节到来时也能享受节日的快乐。
## 使用到的 iFlow CLI 功能
在开发此项目过程中，使用了以下 iFlow CLI 功能：
- **write_file** - 创建项目的 HTML 文件，包含完整的页面结构、CSS样式和JavaScript逻辑
- **read_file** - 读取文件内容，了解现有代码结构
- **replace** - 修改代码中的特定部分，添加新年愿望功能、优化样式和交互逻辑
- **run_shell_command** - 执行 Python HTTP 服务器命令，在后台启动本地服务器
- **ReadCommandOutput** - 查看后台服务器运行状态，确保服务正常启动
## 实现过程
### 1. 基础页面搭建
创建 HTML 页面，引入响应式设计，设置紫色渐变背景。实现春节倒计时功能，计算距离春节的剩余天数、小时、分钟和秒数。设计精美的倒计时显示框，使用玻璃拟态效果和悬停动画。
### 2. 烟花效果开发
使用 HTML5 Canvas 实现烟花动画系统：
- **Firework 类**：模拟烟花从底部升空到目标点的过程
- **Particle 类**：模拟烟花爆炸后的粒子效果，包含重力、速度衰减等物理效果
- **动画循环**：使用 requestAnimationFrame 实现流畅的 60fps 动画
- **交互支持**：点击画布任意位置放烟花，点击按钮连续放烟花
### 3. 界面美化
添加金色发光标题，使用 CSS animation 实现呼吸灯效果。优化倒计时显示框，使用半透明背景和模糊效果。添加悬停动画和过渡效果，提升用户体验。实现响应式设计，确保在移动设备上也能完美显示。
### 4. 新年愿望功能
添加愿望输入框和发送按钮，实现以下功能：
- **TextParticle 类**：专门用于显示愿望文字的粒子效果
- **愿望烟花**：金色烟花携带用户愿望，爆炸时显示文字
- **快捷操作**：支持回车键快速发送愿望
- **文字动画**：愿望文字会慢慢放大、旋转、飘散消失
### 5. 自动庆祝模式
当倒计时结束时，自动触发庆祝模式：
- 持续自动放烟花
- 显示"新春快乐"祝福语
- 按钮文本变为"持续放烟花庆祝"
## 功能特色
- **实时倒计时** - 精确显示距离春节的剩余时间
- **绚丽烟花** - 点击屏幕任意位置绽放烟花，效果逼真
- **愿望烟花** - 输入新年愿望，让愿望化作烟花绽放
- **自动庆祝** - 春节当天自动持续放烟花庆祝
- **精美界面** - 紫色渐变背景，金色发光文字，玻璃拟态效果
- **响应式设计** - 完美支持桌面端和移动端
- **流畅动画** - 60fps 流畅动画体验
- **交互丰富** - 支持点击、按钮、键盘等多种交互方式
## 体验链接
在浏览器中打开以下链接即可体验：
```
```
**启动方法：**
确保本地服务器正在运行（端口8000），如果没有运行，可以在项目目录下执行：
```bash
python -m http.server 8000
```
## 项目结构
```
新春创造营/
├── 春节倒计时烟花.html # 主页面文件
├── 春节倒计时烟花-项目说明.md # 项目说明文档
└── start.bat # 启动脚本
```
## 技术栈
- **HTML5** - 页面结构
- **CSS3** - 样式和动画
- **JavaScript (ES6+)** - 核心逻辑
- **HTML5 Canvas** - 烟花动画渲染
- **无依赖** - 纯原生实现，无需任何框架
## 截图说明
由于是动态交互式应用，建议在浏览器中打开体验完整效果。主要界面包含：
1. **顶部标题** - "
2. **倒计时显示** - 天、时、分、秒四个玻璃拟态卡片
3. **祝福语** - 动态显示距离春节的剩余时间或新春祝福
4. **放烟花按钮** - 点击触发连续烟花效果
5. **愿望输入框** - 输入新年愿望，发送后化作烟花绽放
6. **烟花画布** - 全屏烟花动画效果
-–
*项目版本：v1.0.0*
*开发时间：2026年新春创造营*
*最后更新：2026年2月9日*