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 信息展示

– 自动获取 QQ 头像，支持多个 CDN 源

– 显示固定的用户昵称

– 集成 QQ 号码展示

2. 响应式设计

– 桌面端：网格布局，多列显示

– 移动端：单列布局，优化触摸体验

3. 动画系统

– CSS 关键帧动画

– JavaScript 动态生成粒子效果

– 定时器控制的持续动画

4. 云服务推广

– 专门的广告卡片设计

– 特殊的视觉效果突出显示

– 集成讯度云服务器推广链接

设计理念：

色彩搭配：

– 主色调：粉色系（#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 或创建多页面结构。