因为自己需要做产品，所以一个好的UI界面也是很重要的，发现这种散射的原子颗粒特效还不错，就弄了一个
官方github：https://github.com/VincentGarreau/particles.js/
demo制作器，注意可能需要FQ
https://codepen.io/VincentGarreau/pen/pnlso 这个可以把你制作的demo导出
使用方法
加载particle.js并配置粒子：
index.html
<div></div> <script src="https://www.jb51.net/particles.js"></script>
app.js
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ particlesJS.load('particles-js', 'assets/particles.json', function() { console.log('callback - particles.js config loaded'); });
particles.json就是主要的配置文件
注意一下文件顺序，不然会出现问题
实际demo
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>particles.js</title> <link href="https://www.jb51.net/style.css" > </head> <body> <div></div> </body> <script src='https://www.jb51.net/particles.min.js'></script> 这个玩意需要放在下面 <script src="https://www.jb51.net/index.js"></script> </html>
如有需要下载demo请到QQ群，黑色原子效果很科幻，还不错
根据css颜色和json配置文件，就打造属于自己的科幻效果
参数
键值
参数选项/ 说明
实例
HEX (string) 原子的颜色 string
particles.number.value
number 数量
40
particles.number.density.enable
boolean
true / false
particles.number.density.value_area
number 区域散布密度大小
800
particles.color.value
RGB (object)
HSL (object)
array selection (HEX)
random (string)
{r:182, g:25, b:36}
{h:356, s:76, l:41}
["#b61924", "#333333", "999999"]
"random"
particles.shape.type
string
array selection 原子的形状
"circle"
"edge"
"triangle"
"polygon"
"star"
"image"
["circle", "triangle", "image"]
particles.shape.stroke.width
number 原理的宽度
2
particles.shape.stroke.color
HEX (string) 原子颜色
"#222222"
particles.shape.polygon.nb_slides
number 原子的多边形边数
5
particles.shape.image.src
path link
svg / png / gif / jpg 原子的图片可以使用自定义图片
"assets/img/yop.svg"
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width
number
(for aspect ratio) 图片宽度
100
particles.shape.image.height
number
(for aspect ratio) 图片高度
100
particles.opacity.value
number (0 to 1) 不透明度
0.75
particles.opacity.random
boolean 随机不透明度
true / false
particles.opacity.anim.enable
boolean 渐变动画
true / false
particles.opacity.anim.speed
number 渐变动画速度
3
particles.opacity.anim.opacity_min
number (0 to 1) 渐变动画不透明度
0.25
particles.opacity.anim.sync
boolean
true / false
particles.size.value
number 原子大小
20
particles.size.random
boolean 原子大小随机
true / false
particles.size.anim.enable
boolean 原子渐变
true / false
particles.size.anim.speed
number 原子渐变速度
3
particles.size.anim.size_min
number
0.25
particles.size.anim.sync
boolean
true / false
particles.line_linked.enable
boolean 连接线
true / false
particles.line_linked.distance
number 连接线距离
150
particles.line_linked.color
HEX (string) 连接线颜色
#ffffff
particles.line_linked.opacity
number (0 to 1) 连接线不透明度
0.5
particles.line_linked.width
number 连接线的宽度
1.5
particles.move.enable
boolean 原子移动
true / false
particles.move.speed
number 原子移动速度
4
particles.move.direction
string 原子移动方向
"none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles.move.random
boolean 移动随机方向
true / false
particles.move.straight
boolean 直接移动
true / false
particles.move.out_mode
string
(out of canvas) 是否移动出画布
"out"
"bounce"
particles.move.bounce
boolean
(between particles) 是否跳动移动
true / false
particles.move.attract.enable
boolean 原子之间吸引
true / false
particles.move.attract.rotateX
number 原子之间吸引X水平距离
3000
particles.move.attract.rotateY
number y垂直距离
1500
interactivity.detect_on
string 原子之间互动检测
"canvas", "window"
interactivity.events.onhover.enable
boolean 悬停
true / false
interactivity.events.onhover.mode
array selection