今天我们来学习一下particles.js
Particles.js是一个开源的轻量级JavaScript库，它帮助你创建漂亮的交互式粒子效果。它基于HTML5 canvas元素，能够在背景中生成动态的粒子效果。它可以通过调整不同的选项来定制化粒子形状、数量、大小、颜色、运动速度等等。除此之外，particles.js 还支持响应式设计，可以让效果在不同的设备上呈现出不同的表现。这个库非常适合用于网站、应用程序和其他数字媒体项目中，以增加互动的效果并吸引用户的注意力
官网地址:particles.js – 一个轻量级、无依赖性和响应迅速的 JavaScript 插件，用于粒子背景。 (marcbruederlin.github.io)
先看效果
安装
使用npm
代码语言：javascript
复制
npm install particlesjs —-save
// 引入粒子 js
import Particles from "particlesjs";使用CDN链接
代码语言：javascript
复制
https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js
// 使用
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>基本使用
HTML 结构
代码语言：javascript
复制
<canvas class="background"> </canvas>CSS结构
代码语言：javascript
复制
body { margin: 0; padding: 0; box-sizing: border-box; width: 100%; height: 100vh; background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); }
.background {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
JS部分
记得引入cdn资源链接 "cdnjs.cloudflare.com/ajax/libs/p…"
代码语言：javascript
复制
window.onload = function () {
Particles.init({
// 选择canvas画布元素
selector: '.background',
// 设置最大粒子数
maxParticles: 100,
// 设置粒子的移动速度
speed: 1,
// 设置粒子颜色
color: '#8ACAFF',
// 开启点连线
connectParticles: true,
// 设置
minDistance: 140,
// 设置响应式配置项的调整
responsive: [
{
// 当浏览器窗口宽小于768像素大小采用以下配置
breakpoint:768,
options: {
maxParticles: 200,
color: '#9400D3',
connectParticles: false
}
}, {
// 当浏览器窗口宽小于425像素大小采用以下配置
breakpoint:425,
options: {
maxParticles:100,
connectParticles:true
}
}, {
// 当浏览器窗口宽小于320像素大小采用以下配置
breakpoint:320,
options: {
maxParticles:0
}
}
]
})
}</code></pre></div></div><h3 id="49bav" name="%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%AF%A6%E8%A7%A3">配置项详解</h3><div class="table-wrapper"><table><thead><tr><th style="text-align:left"><div><div class="table-header"><p>配置项</p></div></div></th><th style="text-align:left"><div><div class="table-header"><p>属性值类型</p></div></div></th><th style="text-align:left"><div><div class="table-header"><p>默认值</p></div></div></th><th style="text-align:left"><div><div class="table-header"><p>属性详解</p></div></div></th></tr></thead><tbody><tr><td style="text-align:left"><div><div class="table-cell"><p>selector</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>string</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p></p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>画布元素的CSS选择器</p></div></div></td></tr><tr><td style="text-align:left"><div><div class="table-cell"><p>maxParticles</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>integer</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>100</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>可选:最大颗粒量</p></div></div></td></tr><tr><td style="text-align:left"><div><div class="table-cell"><p>sizeVariations</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>integer</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>3</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>可选:大小变化量</p></div></div></td></tr><tr><td style="text-align:left"><div><div class="table-cell"><p>speed</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>integer</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>0.5</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>可选:粒子的移动速度</p></div></div></td></tr><tr><td style="text-align:left"><div><div class="table-cell"><p>color</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>string 或者数组</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>#0000000</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>可选:颗粒颜色和连接线</p></div></div></td></tr><tr><td style="text-align:left"><div><div class="table-cell"><p>minDistance</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>integer</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>120</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>可选:连接线的距离，单位为px</p></div></div></td></tr><tr><td style="text-align:left"><div><div class="table-cell"><p>connectParticles</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>boolean</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>false</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>可选:如果需要绘制连接线，则为true/false</p></div></div></td></tr><tr><td style="text-align:left"><div><div class="table-cell"><p>responsive</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>array</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>null</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>可选:包含断点和选项的对象数组</p></div></div></td></tr></tbody></table></div><p><strong>方法</strong></p><div class="table-wrapper"><table><thead><tr><th style="text-align:left"><div><div class="table-header"><p>Method</p></div></div></th><th style="text-align:left"><div><div class="table-header"><p>Description</p></div></div></th></tr></thead><tbody><tr><td style="text-align:left"><div><div class="table-cell"><p>pauseAnimation</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>暂停/停止粒子动画</p></div></div></td></tr><tr><td style="text-align:left"><div><div class="table-cell"><p>resumeAnimation</p></div></div></td><td style="text-align:left"><div><div class="table-cell"><p>继续粒子动画</p></div></div></td></tr></tbody></table></div>
