js实现粒⼦特效，particles.js的使⽤
今天偶然看到了⼀个⽐较炫酷的js⽹页。是粒⼦特效的，就试着⽤了⽤。⼀下是步骤，⽅便以后查看使⽤。
1.在⽹站下载源码github/VincentGarreau/particles.js
实现特效的代码js2.下载下来是⼀个压缩包，解压后有很多⽂件，最少需要app.js，particles.js，stats.js这三个⽂件才可以实现最基本功能
3.在把其中的index.html嵌⼊到⾃⼰的web项⽬中，并且替换其中的⽬录就可以了。
其中最重要的⼀点是，index.html中的<script>位置挪到div的前⾯，否则就不显⽰了，亲测！
<!-- particles.js container -->
<div id="particles-js">
</div>
<div id="login">
<form id="login" action="checkLogin.jsp" onsubmit="return validateForm(this);" method="get">
User name：<input id="userName" name="userName" onfocus="delTagUserName();"/><span id="tagUserName"></span><br/> <br/>
Pass  word：<input id="passWord" name="passWord" onfocus="delTagPassWord();"/><span id="tagPassWord"></span> <br/>
<input type="submit" value="登陆"/>
</form>
</div>
<!-- scripts for particles这个不可以移动到前⾯去合并所有的script否则不会显⽰的-->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(2);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.p = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
结果展⽰如下，当⿏标经过时会挤⾛⽴体三⾓形。(登陆表单没有设置样式，有点丑0.0)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。