基于粒子制作酷粒子动态背景效果(模仿知乎)

好久没登录知乎了，发现他们登录页面上的粒子动态效果相当刺眼。检查代码，并使用粒子. js创建基于画布的粒子效果。

上图

上图：

我觉得有一个更大的，所以我根据它得到了一个并播放。

https://github.com/VincentGarreau/particles.js/github :

操作流程：

网上有一个基本流程，可以参考，但是直接在登录页面使用会有一个小bug，需要调整。

1.首先，在页面中引入粒子. js文件。

script src=' http : js/particles . js '/script 2，使用页面中的div作为放置粒子的容器。[通常在底部，css需要改进]

div id='粒子'/div style type=' text/CSS ' #粒子{ position: absolutetop : 0；宽度： 100%；z指数：-1；//如果不设置这个z-index，会干扰登录表单的点击，抢风头。做一个安静的背景不好。背景-color : # 26 AFE 3；}/style3，加载配置文件：在网上，你要用load()方法得到一个配置好的json文件，光路会毁了我。

参考http://codepen.io/VincentGarreau/pen/pnlso官方演示

直接在js中编写配置

脚本类型='text/javascript'//颗粒度sJS.load('颗粒度'，')。/js/app/particles.json '，function(){//console . log(' callback-particles . js config loaded ')；//});粒子sJS('粒子'，{ '粒子' : { '数字' : { '值' : 30，'密度' : { '启用' : true，' value_area': 800 } }，' color': { '值' : ' # ffffff ' }，' shape': { 'type': 'circle '，' stroke ' 33333336 sync': false } }，' line _ link ' : { ' enable ' : true，' distance': 300，' color ' : ' # ffffffff '，'不透明度' : 0 0.4，' width': 2 }，' move': { 'enable': true，' speed': 8，' direction ' : ' none '，' random ' : false ' ' 气泡' : { '距离' : 800，'大小' : 80，'持续时间' : 2，'不透明度' : 0.8，'速度' : 3 }，'击退' : { '距离' : 400，'持续时间' : 0 0.4 }，'推动' : { '粒子_nb': 4 }，'移除' : /script4，配置参数选项并使用：选项github官网页面获取详细信息。控制粒子的数量、运动速度等。

粒子的使用还是有问题的，在chrome下载文件后切换到这个页面是禁用的。和其他解决方案。

摘要

以上是基于粒子. js制作一个很酷的粒子动态背景效果(模仿知乎)的介绍，希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！