引用particlesjs实现背景的动态粒子特效

最近做页面的时候无意发现了一个库，动态粒子效果特别炫，而且还可以根据自己喜好调节，所以就自己记录下来。
方法就是使用particles.js
particles.js可以从github网站下载到最新的源码，网址是 github.com/VincentGarr…

先上一张效果图：

使用方法非常简单

第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到.

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

第二步，在html中放入一个div容器，设置id为particles-js。

<div id="particles-js"></div>

第三步，设置窗口样式

<style type="text/css">
#particles-js {
    z-index: -1;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: #5B5B5B;
}
</style>

第四步，js生成粒子效果，注意这段js文件引用要出现在div容器之后。 这段js就是用来配置粒子效果的，可以先在这里 vincentgarreau.com/particles.j…
配置成自己喜欢的效果，然后下载下来引用到自己的页面。 下面附上我自己选的配置的效果

particlesJS('particles-js', {
  'particles': {
    'number': {
      'value': 380,
      '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': 'grab'
      },
      'onclick': {
        'enable': true,
        'mode': 'push'
      },
      'resize': true
    },
    'modes': {
      'grab': {
        'distance': 140,
        '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
})

不用任何复杂的知识，就能做出炫酷的效果。