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} />
图例