## 一、功能介绍

这是一个简洁好看的个人引导页源码，采用现代化的毛玻璃设计风格，搭配炫酷的粒子动画背景，非常适合作为个人主页、导航页或引导页使用。

**主要特点：**
– 🎨 毛玻璃效果卡片设计，质感高级
– ✨ 粒子动画背景，支持鼠标交互
– 📱 响应式设计，适配各种设备
– 🌙 自动深色模式，保护眼睛
– 🎯 内置社交链接图标
– 🔗 可自定义导航按钮
– 💻 纯原生编写，无需任何框架

## 二、效果展示

这是一个简洁好看的个人引导页源码，采用了现代化的毛玻璃设计风格，搭配炫酷的粒子动画背景，非常适合作为个人主页、导航页或引导页使用。

### 主要功能特点

🎨 **毛玻璃效

## 三、小白教程

这个个人引导页使用非常简单，不需要任何编程基础，跟着下面的步骤就能用：

### 步骤1：下载源码
先从下面的下载地址把源码压缩包下载到电脑上，然后解压到一个文件夹里。

### 步骤2：修改内容
用记事本或者其他文本编辑器打开 `index.html` 文件，把里面的名字、简介、社交链接、导航按钮等改成你自己的信息。

### 步骤3：本地预览
直接双击 `index.html` 文件，就能在浏览器里看到效果了，检查一下有没有问题。

### 步骤4：上传到服务器
如果想让别人也能访问，把所有文件上传到你的网站服务器或者虚拟主机上就可以了。

### 常见问题
**Q：需要安装什么软件吗？**
A：不需要，纯静态网页，直接用浏览器就能打开。

**Q：怎么改头像？**
A：把你的头像图片放到 images 文件夹里，替换掉原来的 avatar.png 就行。

**Q：怎么改粒子颜色？**
A：打开 js/script.js 文件，找到粒子颜色的配置，改成你喜欢的颜色就可以了。

果**：现代化的毛玻璃卡片设计，质感高级
✨ **粒子背景**：炫酷的粒子动画背景，支持鼠标交互，粒子会跟随鼠标移动
📱 **响应式设计**：完美适配手机、平板、电脑等各种设备
🌙 **深色模式**：自动适配系统深色模式，保护眼睛
🎯 **社交链接**：内置QQ、微信、GitHub、邮箱、微博等社交图标，一键跳转
🔗 **导航按钮**：可自定义4个导航按钮，支持图标和文字
⚡ **动画效果**：丰富的入场动画、悬停效果、点击反馈
💻 **纯原生编写**：HTML5 + CSS3 + 原生JavaScript，无需任何框架，加载速度快

### 适合场景

– 个人主页/个人官网
– 导航页/引导页
– 作品集首页
– 社交媒体链接聚合页
– 项目介绍页

### 技术栈

– HTML5
– CSS3（含CSS3动画、毛玻璃效果）
– 原生JavaScript（粒子动画）
– Font Awesome图标库

## 二、效果展示

## 三、小白搭建教程

### 环境要求
– 任何现代浏览器（Chrome、Firefox、Edge、Safari等）
– 简单的文本编辑器（记事本、VS Code、Sublime Text等）
– 不需要安装任何服务器或数据库，纯静态页面

### 步骤1：下载源码
从网盘下载源码压缩包，解压到本地文件夹。

### 步骤2：修改个人信息
用文本编辑器打开 `index.html` 文件，找到以下内容进行修改：

1. **修改头像**：把 `images/avatar.png` 替换成你自己的头像图片
2. **修改昵称**：找到”你的昵称”改成你自己的名字
3. **修改个性签名**：找到”这里是你的个性签名”改成你自己的签名
4. **修改社交链接**：找到QQ、微信、GitHub、邮箱等链接，改成你自己的
5. **修改导航按钮**：找到4个导航按钮，修改文字和链接地址

### 步骤3：修改样式（可选）
如果想要修改颜色、字体等样式，可以打开 `css/style.css` 文件，找到对应的CSS变量进行修改。

### 步骤4：本地预览
直接双击 `index.html` 文件，用浏览器打开即可看到效果。

### 步骤5：上传到服务器
如果想要让别人也能访问，可以把所有文件上传到你的网站服务器或者GitHub Pages、Vercel等静态网站托管平台。

### 常见问题

**Q：粒子效果太卡怎么办？**
A：可以打开 `js/script.js` 文件，修改 `particleCount` 变量，减少粒子数量。

**Q：怎么添加更多社交图标？**
A：可以在Font Awesome官网找到你想要的图标，然后在HTML中添加对应的图标代码和链接。

**Q：手机上显示不正常怎么办？**
A：这个源码已经做了响应式适配，大部分手机都能正常显示。如果有问题，可以检查一下是不是自己修改了什么样式导致的。

## 四、下载地址

http://kk.baige.icu/down.php/54278edf281b62783602f86a1bfd2fb6.zip