ParticleLines 粒子动态线条背景插件
基于 HTML5 Canvas 的网页动态背景插件,为 Typecho 网站绘制蜘蛛网般的粒子连线。 粒子随鼠标移动聚合,在不干扰阅读的前提下增加科技感与动效。
插件简介
ParticleLines 是一个基于 HTML5 Canvas 技术的 Typecho 背景动效插件。 启用后,网站背景将呈现动态粒子网络,粒子间自动连线形成类似蜘蛛网的效果, 并会实时响应用户的鼠标移动。
设计理念
在保持页面简洁性的前提下,为技术博客、作品展示站等场景增加现代感与科技氛围。 动效设计克制,避免对内容阅读造成干扰。
环境要求
PHP 版本
Typecho 版本
存储空间
安装指南
下载插件
获取 ParticleLines 插件压缩包,解压得到插件文件夹。
ParticleLines/
├── Plugin.php
├── assets/
│ ├── particlelines.js
│ └── particlelines.css
└── README.md
上传文件
将插件文件夹上传到 Typecho 的插件目录:
/usr/plugins/ParticleLines/
启用插件
登录 Typecho 后台,进入「控制台 → 插件」,找到 ParticleLines 并点击「启用」。
配置设置
点击「设置」进入配置页面,根据需求调整参数后保存。
配置说明
线条颜色
使用 RGB 数值设置粒子连线颜色:
线条数量
控制屏幕上显示的粒子线条数量:
- 推荐范围: 50-150
- 性能影响: 数值越大,效果越密集,CPU占用越高
- 默认值: 80
透明度
设置线条的透明度:
- 推荐范围: 0.5 ~ 1.0
- 过低: 线条不明显
- 过高: 可能干扰内容阅读
- 默认值: 0.7
层级设置
控制背景的 Z-index 层级:
- 推荐值: 100-200
- 设置过低: 可能被页面元素遮挡
- 设置过高: 可能覆盖导航栏等元素
- 默认值: 150
功能特性
无外部依赖
基于原生 JavaScript 开发,不依赖 jQuery 等第三方库。
体积小巧
核心文件仅 KB 级别,对页面加载速度影响极小。
配置简单
所有参数通过后台图形界面设置,无需修改代码。
侵入性低
仅作为背景渲染层,不改变原有的内容结构与样式。
性能优化
采用 requestAnimationFrame 实现流畅动画,CPU 占用可控。
响应式设计
自动适配不同屏幕尺寸,在移动设备上自动降低粒子密度。
授权信息
适用范围
- 非盈利性质的个人博客网站
- 非盈利性质的 ICP 个人备案网站
- 个人学习、研究用途
使用限制
- 严禁用于商业网站、盈利性网站
- 严禁转售、分发插件源码
- 不提供官方技术支持
适用范围
- ICP 企业备案网站
- 含付费功能的盈利性网站
- 商业项目、企业官网
- .com 等商业域名站点
授权特权
- 终身使用,永久更新
- 官方技术支持
- 优先功能建议采纳
购买须知
退款政策
售后支持范围
包含支持
- 插件安装与配置指导
- 与主题的兼容性问题
- 功能使用咨询
- Bug 修复与更新
不包含支持
- 服务器环境配置
- Typecho 系统安装/迁移
- 个性化定制开发
- 第三方插件冲突
个性化需求
欢迎提出功能建议,我会根据实际情况在后续版本中考虑实现。 但不提供一对一的定制开发服务,敬请理解。
评论 (0)