源码系统概览
文章正文
这套动态雨滴玻璃掉落个人主页源码主打一个氛围感。
打开页面，背景就像一块被雨打湿的玻璃窗，PixiJS 用自定义 GLSL 着色器把雨滴汇聚、滑落、折射的过程实时画出来，看起来通透又干净。
它的雨滴动画不靠预录视频，也不靠 GIF，而是 PixiJS 用着色器实时算出来的，浏览器性能够的时候效果很顺滑。
源码简介
源码本身非常轻，主要文件就 index.html、404.html，再加上 static 里的 pixi.min.js 和 main.js，以及 img 里的背景、前景、水滴透明图和高光图。
index.html 把头像、昵称、签名和四个导航链接居中摆好，真正的视觉重头戏交给 WebGL Canvas 全屏渲染。
main.js 负责启动 PixiJS、加载纹理、维护水滴对象池，并通过自定义 Filter 把水滴的折射效果叠到背景上。
整站纯静态，不需要 PHP、Node、数据库或后端接口，传上去就能跑。
适用场景
如果你想做一个看起来不一样的个人主页，这套模板很适合。
作品集、个人博客入口、设计师门面页都能直接用。
短视频创作者、自由职业者、独立开发者拿来做个人品牌展示也不错。
另外因为代码量小，对前端新手来说是个研究 Canvas 动画和着色器效果的挺好的例子。
功能亮点
雨滴不是简单贴图，而是用 PixiJS + WebGL 实时模拟的滑落与汇聚动画。
GLSL 片元着色器处理水滴折射、高光和背景融合，视觉上有玻璃质感。
纯前端静态实现，不用后端和数据库，部署几乎零成本。
主容器做了响应式宽度，从手机到桌面都能正常显示。
自带 404.html，直接丢到静态托管就能用。
想换主题只要把 img 目录里的图片替换掉，改起来很直观。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：HTML5 + CSS3 + JavaScript（PixiJS WebGL 渲染） 后端：无（纯静态页面） |
依具体方案选型，需自行搭建与维护 |
| 部署方式 | 解压后上传到 Nginx、Apache、Caddy 或者任意静态托管目录就能访问。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 雨滴不是简单贴图，而是用 PixiJS + WebGL 实时模拟的滑落与汇聚动画。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：HTML5 + CSS3 + JavaScript（PixiJS WebGL 渲染）
后端：无（纯静态页面）
数据库：无
运行环境：任意支持静态文件托管的 Web 服务器或本地 HTTP 服务
其他依赖：PixiJS（static/pixi.min.js，本地引入）；外部字体样式来自 zyyo.net（建议本地化）
这套组合意味着你几乎可以在任何支持静态文件的环境里跑起来，配置很简单。
安装与部署提示
解压后上传到 Nginx、Apache、Caddy 或者任意静态托管目录就能访问。
本地调试可以用 VS Code Live Server、Python 的 http.server，或者 Node 的 serve。
头像默认用的是 index.html 里写死的 QQ 头像地址，记得换成自己的。
四个导航入口现在指向 ASP300 示例链接，发布前改成自己的博客、GitHub 或社交主页。
页面里有一段禁用右键和文本选择的脚本，二次开发时按需要删掉就好。
zyyo.net 的字体 CSS 是外联的，建议下载到本地再改 link 路径，免得外站挂掉影响页面。
截图与演示说明
下面是页面实际跑起来的效果：城市雨夜作为背景，头像、昵称和导航入口居中显示。
打开 index.html 就能看到雨滴不断生成、滑落、融合的动态画面。
截图里的头像和导航文字只是演示占位，部署时换成自己的内容就行。
因为效果依赖 WebGL，建议在 Chrome、Edge、Firefox 这类现代浏览器里预览。
常见问题
问：这套源码需要服务器环境吗？
答：不需要。
纯静态 HTML，任意能托管静态文件的服务或者本地文件服务器都能跑。
问：为什么本地双击 index.html 有时显示不完整？
答：因为图片和字体用了绝对路径或跨域加载。
用本地 HTTP 服务打开，并确认资源都能正常访问，动画就能完整显示。
问：怎么换背景和雨滴效果？
答：替换 img 目录下的 background.jpg 和 foreground.jpg 就能换背景。
水滴形状由 alpha.png 和 shine.png 控制，熟悉 PixiJS 的开发者可以进一步调整 main.js 里的参数。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
页面引用了第三方头像、字体和导航链接，使用前请确认它们的可用性与合规性。
最后更新：2026-08-15