基于Particles.js制作超炫粒子动态背景效果(仿知乎)

<script src="js/particles.js"></script>

<div id="particles"></div><style type="text/css"> #particles {  position: absolute;  top: 0;  width: 100%;  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。  background-color: #26AFE3; }</style>

<script type="text/javascript">// particlesJS.load('particles', './js/app/particles.json', function() {//  console.log('callback - particles.js config loaded');// });particlesJS("particles", { "particles": {  "number": {   "value": 30,   "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": 10,   "random": true,   "anim": {    "enable": false,    "speed": 50,    "size_min": 0.1,    "sync": false   }  },  "line_linked": {   "enable": true,   "distance": 300,   "color": "#ffffff",   "opacity": 0.4,   "width": 2  },  "move": {   "enable": true,   "speed": 8,   "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": false,    "mode": "repulse"   },   "onclick": {    "enable": false,    "mode": "push"   },   "resize": true  },  "modes": {   "grab": {    "distance": 800,    "line_linked": {     "opacity": 1    }   },   "bubble": {    "distance": 800,    "size": 80,    "duration": 2,    "opacity": 0.8,    "speed": 3   },   "repulse": {    "distance": 400,    "duration": 0.4   },   "push": {    "particles_nb": 4   },   "remove": {    "particles_nb": 2   }  } }, "retina_detect": true});</script>