js实现粒子特效，particles.js的使用

今天偶然看到了一个比较炫酷的js网页。是粒子特效的，就试着用了用。一下是步骤，方便以后查看使用。

1.在网站下载源码https://github.com/VincentGarreau/particles.js

2.下载下来是一个压缩包，解压后有很多文件，最少需要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" οnsubmit="return validateForm(this);" method="get">
User&nbsp;name：<input id="userName" name="userName" οnfοcus="delTagUserName();"/><span id="tagUserName"></span><br/><br/>
Pass&nbsp;&nbsp;word：<input id="passWord" name="passWord" οnfοcus="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.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
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)

 

转载于:https://www.cnblogs.com/liuyongbo/p/8068284.html