JS插件：粒子动画

1. canvas-nest.js

轻量，只有1.6 kb，

• 只能通过给script标签设置属性来进行配置
• 无法指定容器元素，默认覆盖整个页面

• Github：https://github.com/hustcc/canvas-nest.js
• CodePen：https://codepen.io/wildye/pen/xjmjaj

配置参数

<script color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

var canvasNext = document.createElement("script");

canvasNext.color = "0, 0, 0"; // 粒子颜色(RGB)
canvasNext.opacity = '0.5';   // 粒子透明度
canvasNext.zIndex = '-1';     // 画布层级
canvasNext.count = '150';     // 粒子数量
canvasNext.src = 'https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js';

document.body.appendChild(canvasNext)

2. particle.js

原生 JavaScript 实现

• 官网：https://www.awesomes.cn/repo/VincentGarreau/particles-js
• Github：https://github.com/VincentGarreau/particles.js
• CodePen：https://codepen.io/wildye/pen/OZrJOo

安装导入

• Packages install
  
  • npm： npm install particles.js
  • Bower：bower install particles.js --save
• 语法：particlesJS(element, options, callback)
  
  • element：目标容器元素，默认使用 ID 选择器，无需前缀 #
  • options：参数配置，JSON对象

<!-- 目标容器元素 -->
<div id="container"></div>

<!-- 引入插件 -->
<script src="particles.min.js"></script>

<!-- 插件配置调用 -->
<script>
particlesJS("contarner", {}, function(){
    
    console.log("callback");
})
</script>

特定参数项

• 粒子的颜色 particles.color.value:

"#ff0000"                // HEX
{ r: 155, g: 33, b: 74 } // RGB
{ h