yanhua

🎆 新年烟花网页使用说明

📁 文件结构

新年/
├── fireworks.html      # 主网页文件
├── photo.jpg          # 您的照片（需要添加）
├── gongxifacai.mp3    # 刘德华《恭喜发财》（需要添加）
├── photo-guide.md     # 照片设置说明
├── music-guide.md     # 音乐设置说明
└── README.md          # 本说明文件

🚀 快速开始

1. 准备文件

• 下载刘德华《恭喜发财》MP3，重命名为 gongxifacai.mp3
• 准备您的照片，重命名为 photo.jpg
• 将两个文件放到与 fireworks.html 同一目录

2. 打开网页

双击 fireworks.html 文件，在浏览器中打开

🎮 功能说明

基本操作

• 点击屏幕：在点击位置放烟花
• 空格键：开始10秒倒计时，倒计时结束显示”新年快乐”
• 音乐按钮：播放/暂停背景音乐
• 照片：点击照片有缩放动画效果

自动效果

• 背景会随机放烟花
• 倒计时开始时自动播放音乐
• 新年快乐时会放大量烟花

🎨 界面元素

左下角照片

• 尺寸：150x150 像素
• 效果：霓虹灯边框，粉色发光
• 交互：鼠标悬停放大，点击动画

音乐控制按钮

• 位置：左下角，照片右侧
• 样式：渐变背景，粉色主题
• 功能：播放/暂停音乐

倒计时显示

• 位置：屏幕中央
• 效果：大字体，发光效果
• 动画：脉冲动画

🔧 自定义设置

更换照片

参考 photo-guide.md 文件

更换音乐

参考 music-guide.md 文件

修改颜色

在 fireworks.html 的 CSS 部分修改：

• 主色调：#ff0080（粉色）
• 渐变色：#ff0080, #ff00ff（粉色到紫色）

🌟 特色功能

烟花效果

• 真实物理模拟
• 彩色粒子爆炸
• 拖尾效果
• 重力影响

响应式设计

• 自适应屏幕大小
• 移动端友好
• 触摸屏支持

性能优化

• Canvas 渲染
• 粒子数量控制
• 内存管理

📱 兼容性

推荐浏览器

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

移动端支持

• iOS Safari
• Android Chrome
• 微信内置浏览器

❓ 常见问题

Q: 音乐无法播放？

A: 确保音乐文件存在且文件名正确，某些浏览器需要用户交互才能播放音频。

Q: 照片不显示？

A: 检查照片文件路径和文件名，确保文件格式正确。

Q: 烟花效果卡顿？

A: 关闭其他标签页，或使用性能更好的设备。

Q: 在手机上如何操作？

A: 点击屏幕放烟花，点击音乐按钮控制音乐。

🎯 使用场景

• 新年聚会
• 家庭庆祝
• 公司年会
• 除夕夜
• 春节期间
• 任何喜庆场合

📝 更新日志

v1.0 (2026-01-24)

• 基础烟花效果
• 倒计时功能
• 照片显示
• 音乐播放
• 响应式设计

---

🎊 祝您新年快乐，万事如意！ 🎊