html星空粒子特效代码(html炫酷粒子特效)
我想做个flash特效.星空粒子。问下前辈们有素材或者教程的给指导下。
bt是一个很好的3d文子制作软件,建意楼主学习一下,而且内置动态效果很多,至于星空粒子建议使用幻影粒子软件打造,里面就有这种粒子库可以使用,这些在 相约flash网 都可以找到,站内搜 粒子 两个子,至于BT软件在网络找一下,很多的!很多片头文字效果都是用它!
怎么给html5背景加上js粒子特效
使用了particles.js
particles.js可以从github网站下载到最新的源码,网址是
使用方法非常简单
第一步,在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});
html中可以星空的背景吗
可以的
例如下面这段代码
body{
background:?url(图片)?no-repeat?0?0?transparent;
background-size:?200%?auto;//防止图片不够大
}