文章目录

Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件，可以设置粒子的形状、旋转、分布、颜色等属性，还可以动态添加粒子，效果非常炫酷，能和鼠标互动吸附或者是躲避鼠标指针。

使用方法

1、该粒子动画库插件使用方法非常简单，首先要在页面中引入particles.js文件。

2、在页面中使用一个div来作为放置粒子的容器。

3、通过particlesJS.load()方法加载配置文件

particlesJS.load('particles-js', 'assets/particles.json', function() {  console.log('callback - particles.js config loaded');});

4、编写particles.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": 10,      "random": true,      "anim": {        "enable": false,        "speed": 80,        "size_min": 0.1,        "sync": false      }    },    "line_linked": {      "enable": true,      "distance": 300,      "color": "#ffffff",      "opacity": 0.4,      "width": 2    },    "move": {      "enable": true,      "speed": 12,      "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": true,        "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}

自定义参数

相关链接

• npm包管理器地址：
• Github地址：
• CDN加速：
• 问说网CDN加速：