为你的 HTML 网页添加高颜值粒子线条特效

2026-10-14 • 4 分钟阅读 • 教程

超高颜值粒子线条背景特效

一个基于 HTML5 Canvas 绘制的网页动态粒子背景效果。

本页面已经加载了 canvas-nest.js，如果运行正常，你应该可以直接看到鼠标附近的粒子和连线效果。

项目地址：

canvas-nest.js GitHub

使用方法

1. 引入 canvas-nest.js

推荐使用 cdnjs：

<script
  type="text/javascript"
  color="0,108,255"
  pointColor="0,108,255"
  opacity="0.55"
  zIndex="2"
  count="120"
  src="https://cdnjs.cloudflare.com/ajax/libs/canvas-nest.js/1.0.1/canvas-nest.min.js">
</script>

在 Gridea Pro 中，可以直接把这段代码放在文章正文中。

如果希望整个博客所有页面都显示粒子效果，更推荐把它加入主题的页脚代码、Footer 自定义代码，或者放在 </body> 标签之前。

参数说明

color

线条颜色。

格式：

R,G,B

例如蓝色：

0,108,255

pointColor

粒子点的颜色。

例如：

0,108,255

opacity

线条透明度，范围：

0 ~ 1

例如：

0.55

数值越高，线条越明显。

count

粒子的数量。

例如：

粒子越多，视觉效果越密集，同时也会增加一定的浏览器性能开销。

zIndex

控制粒子 Canvas 所在的页面层级。

旧教程通常使用：

-1

或者：

-2

但在部分 Gridea Pro 主题中，页面主体拥有白色背景，负数层级会导致粒子 Canvas 被页面背景完全遮住。

因此当前主题建议先使用：

确认粒子效果可以正常显示后，再根据主题结构调整层级。

Gridea Pro 主题兼容处理

如果脚本已经正常加载，但仍然看不到粒子，可以在主题的自定义 CSS 中加入：

body {
  position: relative;
}

.main {
  position: relative;
  z-index: 1;
}

canvas {
  pointer-events: none;
}

如果需要让粒子显示在页面主体后方，可以进一步把主体背景改成半透明：

.main {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.86) !important;
}

这样粒子效果就可以透过页面背景显示出来。

常见问题

如果页面完全没有粒子效果，可以打开：

F12 → Network

搜索：

canvas-nest

正常情况下应该看到：

canvas-nest.min.js
200

如果出现：

404
ERR_CONNECTION_RESET
ERR_BLOCKED_BY_CLIENT

说明 JavaScript 文件没有正常加载。

如果脚本请求是 200，但页面仍然没有效果，通常就是 z-index 或主题背景层级导致的。