怎么给html5背景加上js粒子特效
使用了particles.js
particles.js可以从github网站下载到最新的源码，网址是 /VincentGarreau/particles.js/
使用方法非常简单
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
<script?src="particles.min.js"></script>第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
<div?id="particles-js"></div><style?type="text/css">
#particles-js?{
position:?absolute;
top:0;
width:100%;
}
</style>
第三步，设置窗口样式
<style?type="text/css">#particles-js?{
z-index:?-1;
position:?absolute;
top:?0;
width:?100%;
background:?#aaa;
}</style>
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在<script>标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js",?{"particles":?{"number":?{"value":?380,"density":?{"enable":?true,"value_area":?800}
},"color":?{"value":?"#ffffff"
},"shape":?{"type":?"circle","stroke":?{"width":?0,"color":?"#000000"
},"polygon":?{"nb_sides":?5
},"image":?{"src":?"img/github.svg","width":?100,"height":?100
}
},"opacity":?{"value":?0.5,"random":?false,"anim":?{"enable":?false,"speed":?1,"opacity_min":?0.1,"sync":?false
}
},"size":?{"value":?3,"random":?true,"anim":?{"enable":?false,"speed":?40,"size_min":?0.1,"sync":?false
}
},"line_linked":?{"enable":?true,"distance":?150,"color":?"#ffffff","opacity":?0.4,"width":?1
},"move":?{"enable":?true,"speed":?6,"direction":?"none","random":?false,"straight":?false,"out_mode":?"out","bounce":?false,"attract":?{"enable":?false,"rotateX":?600,"rotateY":?1200
}
}
},"interactivity":?{"detect_on":?"canvas","events":?{"onhover":?{"enable":?true,"mode":?"grab"
},"onclick":?{"enable":?true,"mode":?"push"
},"resize":?true
},"modes":?{"grab":?{"distance":?140,"line_linked":?{"opacity":?1
}
},"bubble":?{"distance":?400,"size":?40,"duration":?2,"opacity":?8,"speed":?3
},"repulse":?{"distance":?200,"duration":?0.4
},"push":?{"particles_nb":?4
},"remove":?{"particles_nb":?2
}
}
},"retina_detect":?true});