如何在网页中正确加载并显示 Particles.js 粒子动画

particles.js 无法显示通常是因为 javascript 文件未正确加载或执行顺序错误；最常见原因是缺少对初始化脚本（如 app.js）的引用，或该引用位置不当——必须置于 body 结束前且在 particles.js 之后。

要使 Particles.js 在网页中正常渲染粒子效果，需确保三个关键环节协同工作：引入核心库、提供配置容器、执行初始化逻辑。缺一不可。

首先，在 index.html 的

或 底部引入 Particles.js 官方 cdn（推荐使用稳定版本）：

其次，在 html 中定义一个用于承载粒子画布的容器（通常为 div），并设置明确的宽高与定位：

⚠️ 注意：该容器必须存在且可渲染（避免 display: none 或父元素无尺寸），否则 canvas 将无法正确初始化。

最关键一步是——必须显式引入并执行你的自定义初始化脚本（如 app.js）。该文件负责调用 particlesJS() 并传入配置参数。许多开发者仅引入 particles.min.js，却遗漏了这一步，导致页面“静默失败”，控制台也无报错。

请确认你的 index.html 中，在 闭合标签之前，按如下顺序引入脚本：

其中 app.js 内容应类似：

// app.js particlesJS('particles-js', {   particles: {     number: { value: 80 },     color: { value: '#ffffff' },     shape: { type: 'circle' },     opacity: { value: 0.5 },     size: { value: 3 }   },   interactivity: {     detect_on: 'canvas',     events: { onhover: { enable: true, mode: 'repulse' } }   } });

? 补充提示：

• 若使用本地文件，请检查浏览器开发者工具的 .network 面板，确认 app.js 和 particles.min.js 均返回 200 状态；
• 不要在 dom 尚未就绪时调用 particlesJS()，app.js 放在 前已天然规避此问题；
• 避免重复初始化（如多次调用 particlesJS() 同一容器），可能导致异常行为。

完成以上配置后刷新页面，粒子动画即可正常呈现。这不是 bug，而是典型的“初始化缺失”问题——Particles.js 本身不自动运行，它依赖你主动触发。