介绍粒子在JS库中的使用

粒子. js

一个用于创建粒子的轻量级JavaScript库。

创建粒子背景的轻量级JavaScript库

我们先来看看效果图：

标准版本：

明星版：

气泡版本：

雪地版本：

我们能用这个做什么？

我觉得这个比较适合没有背景的页面，或者找不到适合背景的图片，大家都可以用这个。

例如：

或者

嗯，效果挺好的。

然后，下面将描述如何使用粒子. js。

https://github.com/VincentGarreau/particles.js Github上的开源

本项目提供演示。你可以直接下载这个项目，并在演示中打开index.html文件，看看效果。

那么，如果我们想构建自己的项目，如何引入文件呢？

建议如下：

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' titleparticles.js/title meta name=' description ' content=' particles . js是一个用于创建粒子的轻量级JavaScript库。meta name=' author ' content=' Vincent Ga rreau '/meta name=' viewport ' content=' width=device-width，initial-scale=1.0，minimal-scale=1.0，maximum-scale=1.0，user-scalable=no' link rel='样式表' media=' screen ' href=' CSS/style . CSS ' rel=' external no follow '/head dydiv id=' particles-js '/div！-scripts-script src=' http : js/particles . js '/script script src=' http 3360 js/app.js '/script/body/html particles . js是它的库，我们肯定要导入，app . js是参数配置文件，我们也要导入，而stats在demo中，

我们也可以引入style.css，背景色在css中设置。

基于这个模板，我们可以添加我们想要实现的功能，比如注册和登录功能。需要注意的是，我们要实现的功能代码块是用div封装的，这个div的绝对位置是在css中设置的。

以下描述了参数配置文件app.js的使用：

粒子数。数值：粒子的数量

粒子数密度：粒子的密度

粒子。number.density.enable:启用粒子密度(真或假)

粒子。number.density.value _ area:每个粒子占用的空间(仅在启用粒子密度时可用)

Particles.color.value:粒子的颜色(支持十六进制“#b61924”、RGB“{ r :182、g:25、b:36}”、hsl和random)

粒子形状类型：粒子的形状(“圆”、“边”、“三角形”、“多边形”、“星形”和“图像”)

粒子。不透明度。值：粒子的透明度

粒子大小启用：是否启用粒子速度(真/假)

粒子。大小。动画。速度：粒子动画频率

粒子。大小。动画。同步：粒子的运行速度是否与动画同步

粒子。移动。速度：粒子移动速度

您可以根据这些配置文件配置您喜欢的背景。这里有两个完整的配置文件app.js

简介1(经典背景):

{ '粒子' : { '数字' : { '值' : 80,'密度' : { '启用： true，' value_area': 800 } }，' color': { '值： ' # ffffff ' }，' shape': { 'type': '多边形、“stroke”: {“width”:“sync”: false } }、“line _ link”: {“enable”: true、“distance”: 150、“color”: ' # ffffffff '，'不透明度' : 0.4，'宽度' : 1 }，'移动' : { '启用' : true，'速度' : 6，'方向' : '无'，'随机' : false '气泡' : { '距离' : 400,'大小' : 40,'持续时间' : 2,'不透明度' : 8,'速度' : 3 },'击退' : { '距离' : 200,'持续时间' : 0 0.4 },'推动' : { '粒子_nb': 4 }，移除' :配置文件二（星空背景):

{ '粒子' : { '数字' : { '值' : 160,'密度' : { '启用： true，' value_area': 800 } }，' color': { '值： ' # ffffff ' }、' shape': { 'type': 'circle '、' stroke ' : { ' width ' sync ' : false } }、' line _ link ' : { ' enable ' : false、' distance': 150、' color ' : ' # ' ffffffff '，'不透明度： 0 0.4、'宽度' : 1 }、'移动' : { '启用' : true、'速度' : 1、'方向' : '无'、'随机' : true、'气泡' : { '距离' : 250,'大小' : 0,'持续时间' : 2,'不透明度' : 0,'速度' : 3 },'击退' : { '距离' : 400,'持续时间' : 0 0.4 },'推动' : { '粒子_nb': 4 }，移除' : { '总结

以上所述是小编给大家介绍的粒子使用简介，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！