readme

✨ 互动特效合集

一个精心制作的网页互动特效集合，包含多种有趣的视觉体验和小游戏。

📋 项目列表

⚠️ 重要说明

由于部分项目需要使用 摄像头权限，浏览器出于安全考虑有以下限制：

1. 无法直接打开 HTML 文件 - 使用 file:// 协议打开时，摄像头 API 会被禁用
2. HTTPS 要求 - 部署到远程服务器时，必须使用 HTTPS 协议才能访问摄像头
3. 本地开发例外 - localhost 或 127.0.0.1 被视为安全来源，可使用 HTTP

因此，必须通过本地服务器运行本项目。

🚀 快速开始

方式一：使用 http-server（推荐）

# 安装 http-server（如果未安装）
npm install -g http-server

# 进入项目目录
cd your-project-folder

# 启动服务器
http-server

# 或指定端口
http-server -p 8080

访问：http://localhost:8080

方式二：使用 Python 服务器

Python 3.x：

# 进入项目目录
cd your-project-folder

# 启动服务器
python -m http.server 8080

Python 2.x：

python -m SimpleHTTPServer 8080

访问：http://localhost:8080

方式三：使用 VS Code Live Server

1. 安装 VS Code 扩展：Live Server
2. 右键点击 index.html
3. 选择 "Open with Live Server"

方式四：使用 PHP 内置服务器

# 进入项目目录
cd your-project-folder

# 启动服务器
php -S localhost:8080

方式五：使用 npx（无需全局安装）

# 使用 http-server
npx http-server -p 8080

# 或使用 serve
npx serve -p 8080

📁 项目结构

.
├── index.html              # 主导航页面
├── index_飞花令.html        # 飞花令
├── index_粒子特效.html      # 粒子特效
├── index_粒子特效2.html     # 粒子特效 Plus
├── index_枪击1.html         # 枪击特效
├── index_枪击2.html         # 枪击特效 2.0
├── index_切水果.html        # 切水果游戏
├── index_圣诞树.html        # 圣诞树
├── index_圣诞树plus.html    # 圣诞树 Plus
├── index_Love.html          # Love 特效
├── js/                      # JavaScript 资源
└── README.md               # 项目说明

🔧 环境要求

• 现代浏览器（Chrome、Firefox、Edge、Safari）
• Node.js v16+（如使用 http-server）
• Python 3.x（如使用 Python 服务器）

🌐 浏览器兼容性

🔐 关于摄像头权限

首次使用需要摄像头的功能时，浏览器会弹出权限请求：

1. 点击 "允许" 授予摄像头权限
2. 如果误点了 "拒绝"，需要在浏览器设置中重新开启：
   • Chrome：地址栏左侧 🔒 图标 → 网站设置 → 摄像头 → 允许
   • Firefox：地址栏左侧 🔒 图标 → 清除权限并重试

❓ 常见问题

Q: 摄像头无法启动？ A: 请检查以下几点：

• 确保通过 localhost 或 127.0.0.1 访问，而非直接打开文件
• 确保浏览器已授予摄像头权限
• 确保没有其他程序正在使用摄像头
• 尝试刷新页面或重启浏览器

Q: 页面样式显示异常？ A: 请确保使用现代浏览器，并启用 JavaScript。

Q: 如何部署到服务器？ A: 如需部署到远程服务器，必须：

• 配置 HTTPS（可使用 Let's Encrypt 免费证书）
• 确保服务器正确设置 MIME 类型

📝 开源协议

本项目采用 MIT 协议开源。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

Made with 💜 by Claude

⬅️ VPN实战 🏠 00-网络与项目 ➡️ public.zip