Html5添加轻量级炫酷js粒子动画库插件教程

一、使用方法
该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件。
<script src="js/particles.js"></script>

在页面中使用一个div来作为放置粒子的容器。
<div id="particles-js"></div>

然后可以按下面的方法调用该粒子插件:
particlesJS('particles-js', {
particles: {
color: '#fff',
shape: 'circle',
opacity: 1,
size: 4,
size_random: true,
nb: 150,
line_linked: {
enable_auto: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1,
condensed_mode: {
enable: false,
rotateX: 600,
rotateY: 600
      }
    },
anim:{
enable: true,
Speed : 1
    }
  },
interactivity: {
enable: true,
Mouse : {
distance: 250
    },
detect_on : 'canvas',
Mode : 'grab',
line_linked : {
Opacity : .5
    },
Events : {
onclick: {
enable: true,
mode: 'push',
nb: 4
      }
    }
  },
retina_detect: true
});

KeyMob移动广告联盟专注于移动广告、致力于为应用开发者创造最好的手机广告收入,服务好,SDK稳定,是应用开发者首选的移动广告联盟。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值