效果预览

项目简介

精致二次元个人主页
一款充满浪漫与梦幻的粉色二次元风格个人主页，运用了现代玻璃拟态设计和丰富的动画效果，完美适配桌面端和移动端设备。

视觉设计

玻璃拟态效果

采用 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 号码、固定昵称等个人信息。

内容调整与替换说明

• 关于我、技能展示、联系方式等部分的内容均可根据个人需求进行修改。
• 可以轻松替换背景图片或调整 CSS 中的背景图片路径。
• 通过调整 CSS 中的 rgba 数值，可以轻松调整卡片的透明度。

主要功能与特点

1. QQ 信息展示：自动获取 QQ 头像，支持多源备用头像 CDN。固定显示用户昵称和 QQ 号，方便用户识别。
2. 响应式设计：桌面端采用网格布局多列显示内容，移动端则优化为单列布局，提供更好的触摸体验。
3. 丰富的动画系统：结合 CSS 关键帧动画和 JavaScript 动态生成粒子效果，提供流畅且吸引人的视觉体验。
4. 云服务推广集成：设计专门的广告卡片，突出显示讯度云服务器的推广内容，并提供相关链接供用户选择。
5. 平滑交互与性能优化：所有动画均采用缓动函数实现平滑交互，同时合理控制动画数量和复杂度，确保页面性能。 技术特点概览 - 现代化的 CSS 技术应用：如 backdrop-filter: blur() 实现毛玻璃效果、CSS Grid & Flexbox 实现响应式布局、CSS 变量便于主题定制等。 - JavaScript 功能强化：DOM 操作实现动态内容生成、事件监听实现交互效果、定时器控制动画循环等。同时具备错误处理机制，如头像加载备用方案。 - 性能优化措施：图片懒加载概念、动画元素自动清理、事件节流控制以及内存泄漏防护等措施确保页面性能稳定。 - 良好的浏览器兼容性：经过测试，该页面在 Chrome、Firefox、Safari 和 Edge 等主流浏览器中表现良好，部分老旧浏览器可能