网站更新日志 - 2026-04-09
✨ 本次更新内容
1️⃣ 添加动效
Hero 区域动画
- ✅ 背景图案浮动动画
- ✅ 标题淡入上升动画
- ✅ 文字延迟动画
- ✅ 按钮渐入效果
功能卡片动画
- ✅ 悬停时上浮+缩放效果
- ✅ 光线扫过动画
- ✅ 阴影渐变效果
- ✅ 边框颜色变化
按钮动画
- ✅ 点击波纹效果
- ✅ 悬停上浮动画
- ✅ 阴影扩散效果
滚动动画
- ✅ 页面滚动时内容渐入
- ✅ 区块延迟动画
- ✅ 元素依次出现
2️⃣ 更新联系方式
| 信息项 | 更新前 | 更新后 |
|--------|--------|--------|
| 邮箱 | contact@chengguoit.com | cgit@chengguoit.com |
| 电话 | 400-XXX-XXXX | 13117976879 |
| 客服微信 | 文字提示 | 显示二维码 |
3️⃣ 新增文件
| 文件 | 说明 |
|------|------|
| style.css | 全局样式文件（含动效） |
| images/customer-service-qr.jpg | 客服微信二维码 |
📦 需要重新上传的文件
必须上传（有修改）
✅ index.html （添加了动效 + JavaScript）
✅ style.css （新建文件，全局样式）
✅ about.html （更新联系方式）
✅ images/customer-service-qr.jpg （客服二维码）
可选上传（无变化）
docs.html
cases.html
docs/pc/index.html
docs/mobile/index.html
🚀 快速上传
方式一：使用上传脚本
cd docs/website
./upload.sh
方式二：只上传修改的文件
# 使用 FTP 工具只上传这些文件：
- index.html
- style.css
- about.html
- images/customer-service-qr.jpg
🎨 动效说明
支持的动画效果
- fadeInUp - 从下往上淡入
- slideInLeft - 从左滑入
- slideInRight - 从右滑入
- scaleIn - 缩放淡入
- pulse - 脉冲效果
- gradientShift - 渐变移动
如何使用动画
方式一：添加 CSS 类
内容
方式二：滚动触发
滚动时显示
方式三：悬停效果
悬停时上浮
⚡ 性能优化
动画性能
- 使用 CSS3 transform 和 opacity
- 启用 GPU 加速
- 避免重排和重绘
兼容性
- 支持现代浏览器（Chrome、Firefox、Safari、Edge）
- 移动端完美适配
- 优雅降级处理
📱 响应式支持
所有动效在移动端也能正常工作：
- 自动适配触摸事件
- 简化移动端动画
- 保持流畅性能
🔍 查看效果
上传后，清除浏览器缓存（Ctrl+F5），访问：
- 首页 - 查看Hero区域动画和功能卡片悬停效果
- 关于我们 - 查看更新的联系方式和客服二维码
- 滚动页面 - 查看内容渐入动画
更新时间：2026-04-09 19:41
文件大小：177KB（完整包）