0

我已经从这个网站下载了 JSON 库配置：https ://vincentgarreau.com/particles.js/#default 。我是 JSON 新手，因此我不明白出了什么问题。当我编译时，我的浏览器上只弹出一个蓝屏，这意味着只有 css 播放。有人可以帮我理解出了什么问题吗？我很抱歉这篇长文章，但老实说，我不知道还有什么方法可以适应它，这样我才能清楚地了解我在做什么。

这是我的 HTML 文件，名为particles.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="particles.js"></script>
<link href="particles.css" rel="stylesheet" type="text/css">
</head>
<body id="particles-js">

   <script type="text/javascript">
    particlesJS("particles-js",<strong>particlesjs-config.json</strong>);
  </script>

 </body>

</html>

这是我的 CSS 文件，名为particles.css

body{
    background: cornflowerblue;
   }

这是我下载的 JSON 配置。该文件称为particlesjs-config.json

    {
"particles": {
  "number": {
    "value": 80,
    "density": {
      "enable": true,
      "value_area": 800
    }
  },
  "color": {
    "value": "#ffffff"
  },
  "shape": {
    "type": "circle",
    "stroke": {
      "width": 0,
      "color": "#000000"
   },
    "polygon": {
      "nb_sides": 5
    },
    "image": {
      "src": "img/github.svg",
      "width": 100,
      "height": 100
    }
  },
  "opacity": {
    "value": 0.5,
  "random": false,
  "anim": {
    "enable": false,
    "speed": 1,
    "opacity_min": 0.1,
    "sync": false
  }
},
"size": {
  "value": 3,
  "random": true,
  "anim": {
    "enable": false,
    "speed": 40,
    "size_min": 0.1,
    "sync": false
  }
},
"line_linked": {
  "enable": true,
  "distance": 150,
  "color": "#ffffff",
  "opacity": 0.4,
  "width": 1
},
"move": {
  "enable": true,
  "speed": 6,
  "direction": "none",
  "random": false,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
    "enable": false,
    "rotateX": 600,
    "rotateY": 1200
    }
  }
},
 "interactivity": {
  "detect_on": "canvas",
  "events": {
    "onhover": {
      "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
  "resize": true
},
"modes": {
  "grab": {
    "distance": 400,
    "line_linked": {
      "opacity": 1
    }
  },
  "bubble": {
    "distance": 400,
    "size": 40,
    "duration": 2,
    "opacity": 8,
    "speed": 3
  },
  "repulse": {
    "distance": 200,
    "duration": 0.4
  },
  "push": {
    "particles_nb": 4
  },
  "remove": {
    "particles_nb": 2
  }
  }
},
  "retina_detect": true
}
4

1 回答 1

0

请参阅此页面 https://github.com/VincentGarreau/particles.js

您似乎错误地加载了 JSON 文件。应该和这个类似

<script>
  particlesJS.load('particles-js', 'particles.json', function(){
    console.log('particles.json loaded...do your thing!');
  });
</script>
于 2018-07-09T23:47:23.140 回答