react+粒子动画效果背景（Particles BG)

1.安装

npm install --save particles-bg

yarn add particles-bg

2.引入

import ParticlesBg from ‘particles-bg’

3.使用

export default function index() {
  return (
    <div>
      <div style={{ height: '500px' }}>...</div>
      <ParticlesBg type="lines" bg={true} />
    </div>
  );
}

 链接:https://github.com/lindelof/particles-bg

 自定义：

  let config = {
    num: [4, 7],
    rps: 0.1,
    radius: [5, 40],
    life: [1.5, 3],
    v: [2, 3],
    tha: [-40, 40],
    alpha: [0.6, 0],
    scale: [1, 0.1],
    position: 'center', 
    color: ['random', '#ff0000'],
    cross: 'dead', 
    random: 15, 
    g: 5,
    onParticleUpdate: (ctx, particle) => {
      ctx.beginPath();
      ctx.arc(particle.p.x, particle.p.y, particle.radius, 0, Math.PI * 2); // 绘制圆形
      ctx.fillStyle = particle.color;
      ctx.fill();
      ctx.closePath();
    },
  };

    <ParticlesBg type="custom" config={config} bg={true} />

图例