无法实现particles.js粒子效果，请求排查问题原因

安全阿岳

2026-8-5

解决particles.js点击按钮后粒子容器空白的问题

最可能的原因：粒子容器无尺寸

你的particle-div是空白div，默认没有宽高，particles.js会在容器内创建canvas，但容器没尺寸时canvas也会是0×0，导致看不到粒子。

解决方法：在style.css中给容器设置明确的宽高：

#particle-div {
  width: 100%;
  height: 400px;
  /* 可选：设置背景色，和粒子颜色区分开，避免粒子和背景同色看不见 */
  background-color: #1a1a1a;
}

其他排查方向

检查配置文件匹配度
确认particles-config.json的文件名和路径正确，且配置中的粒子颜色与容器背景色不同（比如粒子是白色就别用白色背景）。你可以先跳过json加载，直接用内联配置测试：

$("#particle-button").click(function(){
    particlesJS('particle-div', {
        "particles": {
            "number": {"value": 100},
            "color": {"value": "#ffffff"},
            "shape": {"type": "circle"},
            "opacity": {"value": 0.7},
            "size": {"value": 2},
            "line_linked": {"enable": true, "distance": 150},
            "move": {"enable": true, "speed": 2}
        },
        "interactivity": {
            "events": {"onhover": {"enable": true, "mode": "grab"}}
        }
    });
});

如果这样能显示粒子，说明是json文件的问题（比如路径错误、内容格式错误）。