粒子particlesJS的简单使用

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

A lightweight JavaScript library for creating particles.
一个轻量级的创建粒子背景的 JavaScript 库

一 下载
二引入
三实例
举个例子

0_1517040893595_00000.jpg

效果
0_1517040963728_TIM截图20180127161534.jpg

配置参数

particles.number.value : 粒子的数量

particles.number.density : 粒子的稀密程度

particles.number.density.enable : 启用粒子的稀密程度 (true 或 false)

particles.number.density.value_area : 每一个粒子占据的空间(启用粒子密度,才可用)

particles.color.value : 粒子的颜色 (支持16进制”#b61924”,rgb”{r:182, g:25, b:36}”,hsl,以及random)

particles.shape.type: 粒子的形状 (”circle” “edge” “triangle” “polygon” “star” “image”)

particles.opacity.value: 粒子的透明度

particles.size.anim.enable: 是否启用粒子速度(true/false)

particles.size.anim.speed: 粒子动画频率

particles.size.anim.sync: 粒子运行速度与动画是否同步

particles.move.speed: 粒子移动速度

用 div 来封装我们要实现的功能代码块,并且在 css 中为这个 div 设置绝对定位。

这个东西挺好看,注意性能问题!

@admin 好的

登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待