html星空粒子特效代码(html炫酷粒子特效)

http://www.itjxue.com  2023-03-01 09:13  来源:未知  点击次数: 

我想做个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;//防止图片不够大

}

(责任编辑:IT教学网)

更多

推荐CorelDraw教程文章