KaiGe粉色二次元个人主页源码

项目简介：
一个精美的粉色二次元风格个人主页，采用现代化的玻璃拟态设计和丰富的动画效果。

主要特色：

视觉设计：

• 玻璃拟态效果：采用 backdrop-filter 和半透明背景实现现代化的毛玻璃效果
• 粉色主题：温柔的粉色渐变配色方案，营造甜美的二次元氛围
• 初音未来背景：高清的 VOCALOID 初音未来壁纸作为页面背景
• 响应式布局：完美适配桌面端和移动端设备

动画效果：

• 樱花飘落：持续的樱花花瓣飘落动画，增添浪漫氛围
• 浮动心形：随机分布的爱心和装饰符号浮动效果
• 鼠标跟随：鼠标移动时随机生成粉色粒子特效
• 悬停动画：卡片和按钮的悬停渐变和位移效果
• 头像光效：头像边缘的流光动画效果

功能特性：

• QQ集成：自动获取QQ头像，支持多个头像源备用
• 固定昵称：显示个性化的用户昵称
• 导航菜单：平滑滚动的页面内导航
• 社交链接：多个社交平台链接入口
• 云服务广告：集成讯度云服务器推广内容

文件结构：

• index.html 主页面文件
• hatsune_miku_vocaloid_wallpaper.png 初音未来背景图
• README.md 项目说明文档

使用方法：

前置要求：

• 现代化的浏览器（支持 CSS backdrop-filter）
• 本地Web服务器（可选，用于避免跨域问题）

安装步骤：

1. 下载所有项目文件到本地目录
2. 确保文件完整（HTML文件和背景图片）
3. 直接在浏览器中打开 index.html 文件
4. 或使用本地服务器运行（推荐）

自定义配置：

修改个人信息：
在 index.html 文件中找到JavaScript部分：

• QQ_NUMBER = '1732418'; 修改为您的QQ号
• FIXED_NICKNAME = "a'ゞ 梦玄诗"; 修改为您的昵称

修改内容：
可以修改以下部分的内容：

• 关于我部分
• 技能展示
• 联系方式
• 推荐番剧

更换背景：
替换 hatsune_miku_vocaloid_wallpaper.png 文件，或在CSS中修改背景图片路径

调整透明度：
在CSS中修改各个卡片的 rgba 数值来调整透明度

主要功能：

1. QQ信息展示
2. 自动获取QQ头像，支持多个CDN源
3. 显示固定的用户昵称
4. 集成QQ号码展示
5. 响应式设计
6. 桌面端：网格布局，多列显示
7. 移动端：单列布局，优化触摸体验
8. 动画系统
9. CSS关键帧动画
10. JavaScript动态生成粒子效果
11. 定时器控制的持续动画
12. 云服务推广
13. 专门的广告卡片设计
14. 特殊的视觉效果突出显示
15. 集成讯度云服务器推广链接

设计理念：

色彩搭配：

• 主色调：粉色系（#ff69b4, #d63384）
• 辅助色：白色和半透明效果
• 强调色：紫色系（#8e44ad）

视觉效果：

• 玻璃拟态：现代化的UI设计趋势
• 柔和渐变：营造温柔的视觉感受
• 动态元素：增加页面活力和趣味性

用户体验：

• 平滑交互：所有动画都采用缓动函数
• 视觉反馈：悬停状态提供即时反馈
• 性能优化：合理控制动画数量和复杂度

技术特点：

CSS技术：

• backdrop-filter: blur() - 现代化毛玻璃效果
• CSS Grid & Flexbox - 响应式布局
• CSS变量 - 便于主题定制
• 关键帧动画 - 流畅的视觉效果

JavaScript功能：

• DOM操作 - 动态内容生成
• 事件监听 - 交互效果实现
• 定时器 - 动画循环控制
• 错误处理 - 头像加载备用方案

性能优化：

• 图片懒加载概念
• 动画元素自动清理
• 事件节流控制
• 内存泄漏防护

浏览器兼容性：

完全支持：

• Chrome 76+
• Firefox 103+
• Safari 14+
• Edge 79+

部分支持：

• 较旧版本浏览器可能不支持 backdrop-filter 效果
• 降级为普通背景色显示

常见问题：

Q: 头像不显示怎么办？
A: 检查网络连接，代码中已包含多个备用头像源。

Q: 动画效果卡顿？
A: 可以减少樱花数量或关闭部分动画效果。

Q: 如何修改广告内容？
A: 在HTML中找到 .ad-card 部分进行修改。

Q: 能否添加更多页面？
A: 当前为单页面设计，可以添加更多section或创建多页面结构。

开源协议：
本项目采用 MIT 协议开源，您可以自由使用、修改和分发。

致谢：

• 初音未来壁纸来源于网络
• QQ头像API由腾讯官方提供
• 讯度云提供云服务器支持

项目作者：KAI GE