返回列表 发布新帖

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

2311 0
1732418@qq.com 发表于 昨天 00:00 | 查看全部 阅读模式 <

马上注册,结交更多好友,享用更多功能,让你轻松玩转小K网。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
粉色二次元个人主页

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或创建多页面结构。

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

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

项目作者:KAI GE

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表