项目简介:
一个精美的粉色二次元风格个人主页,采用现代化的玻璃拟态设计和丰富的动画效果。
主要特色:
视觉设计:
– 玻璃拟态效果:采用 backdrop-filter 和半透明背景实现现代化的毛玻璃效果 – 粉色主题:温柔的粉色渐变配色方案,营造甜美的二次元氛围 – 初音未来背景:高清的 VOCALOID 初音未来壁纸作为页面背景 – 响应式布局:完美适配桌面端和移动端设备动画效果:
– 樱花飘落:持续的樱花花瓣飘落动画,增添浪漫氛围 – 浮动心形:随机分布的爱心和装饰符号浮动效果 – 鼠标跟随:鼠标移动时随机生成粉色粒子特效 – 悬停动画:卡片和按钮的悬停渐变和位移效果 – 头像光效:头像边缘的流光动画效果功能特性:
– QQ集成:自动获取QQ头像,支持多个头像源备用 – 固定昵称:显示个性化的用户昵称 – 导航菜单:平滑滚动的页面内导航 – 社交链接:多个社交平台链接入口 – 云服务广告:集成讯度云服务器推广内容文件结构:
– index.html 主页面文件 – hatsunemikuvocaloid_wallpaper.png 初音未来背景图 – README.md 项目说明文档使用方法:
前置要求: – 现代化的浏览器(支持 CSS backdrop-filter) – 本地Web服务器(可选,用于避免跨域问题)安装步骤:
- 下载所有项目文件到本地目录
- 确保文件完整(HTML文件和背景图片)
- 直接在浏览器中打开 index.html 文件
- 或使用本地服务器运行(推荐)
自定义配置:
修改个人信息: 在 index.html 文件中找到JavaScript部分: – QQNUMBER = ‘1732418’; 修改为您的QQ号 – FIXEDNICKNAME = “a’ゞ 梦玄诗”; 修改为您的昵称
修改内容: 可以修改以下部分的内容: – 关于我部分 – 技能展示 – 联系方式 – 推荐番剧
更换背景: 替换 hatsunemikuvocaloid_wallpaper.png 文件,或在CSS中修改背景图片路径
调整透明度: 在CSS中修改各个卡片的 rgba 数值来调整透明度
主要功能:
- QQ信息展示
– 自动获取QQ头像,支持多个CDN源 – 显示固定的用户昵称 – 集成QQ号码展示
- 响应式设计
– 桌面端:网格布局,多列显示 – 移动端:单列布局,优化触摸体验
- 动画系统
– CSS关键帧动画 – JavaScript动态生成粒子效果 – 定时器控制的持续动画
- 云服务推广
– 专门的广告卡片设计 – 特殊的视觉效果突出显示 – 集成讯度云服务器推广链接
设计理念:
色彩搭配: – 主色调:粉色系(#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
- 注意:本站资源多为网络收集和用户投稿,如涉及版权问题请及时与站长联系,我们会在第一时间内删除资源。
- 您购买的只是资源,不提供解答疑问和安装服务。免费源码里的接口不保证一直可以用
- 本站用户发帖仅代表本站用户个人观点,并不代表本站赞同其观点和对其真实性负责。
- 本站资源大多存储在云盘,如发现链接失效,请及时与站长联系,我们会第一时间更新。
- 转载本网站任何内容,请按照转载方式正确书写本站原文地址
- 如果发现侵权可以联系站长删除,站长vx:xiaoxiongmao0504或者邮箱通知3326096692@qq.com

