如何使用css3+js实现烟花绽放的动画效果
这篇文章主要为大家展示了"如何使用css3+js实现烟花绽放的动画效果"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"如何使用css3+js实现烟花绽放的动画效果"这篇文章吧。
每个烟花筒沿着场地底部的线分配一个随机的起始位置。它还在标记的区域内分配了一个随机目标。当烟花筒接近其目标点时，它会缩小为不可见（0x0像素）。
此时，耀斑变得可见。这些实际上是一系列以径向方式向外指向的DIV，在向外的尖端有一种颜色-就像火柴棍一样。为了模拟爆炸，他们只是增加了长度，使灯光向外移动。
JavaScript用于：
1、将所有必需的元素添加到页面（DOM）;
2、为每个烟花筒创建和分配关键帧;和
3、指定颜色并将每个光斑旋转到正确的位置。
代码示例：
html代码：
css代码（css-fireworks.css）
@-webkit-keyframesexplosion{
from{
width:0;
opacity:0;
}
33%{
width:0;
opacity:0;
}
34%{
width:10px;
opacity:1.0;
}
40%{
width:80px;
opacity:1.0;
}
to{
width:90px;
opacity:0;
}
}
@-moz-keyframesexplosion{
from{
width:0;
opacity:0;
}
33%{
width:0;
opacity:0;
}
34%{
width:10px;
opacity:1.0;
}
40%{
width:80px;
opacity:1.0;
}
to{
width:90px;
opacity:0;
}
}
#stage{
position:relative;
width:600px;
height:400px;
margin:100pxauto;
background:#000url(img/outerspace.jpg);
}
.launcher{
position:absolute;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
background:red;
border-bottom:3pxsolidyellow;
}
.launcherdiv{
position:absolute;
opacity:0;
-webkit-animation-name:explosion;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:explosion;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
left:3px;
top:3px;
width:10px;
height:4px;
border-right:4pxsolidyellow;
border-radius:2px;
-webkit-transform-origin:00;
-moz-transform-origin:00;
}
js代码（css-fireworks.js）
document.addEventListener("DOMContentLoaded",function(){
varnum_launchers=12;
varnum_flares=20;
varflare_colours=['red','aqua','violet','yellow','lightgreen','white','blue'];
varcssIdx=document.styleSheets.length-1;
functionmyRandom(from,to)
{
returnfrom+Math.floor(Math.random()*(to-from));
}
varkeyframes_template="from{left:LEFTFROM%;top:380px;width:6px;height:12px;}\n"
+"33%{left:LEFTTOP%;top:TOPTOPpx;width:0;height:0;}\n"
+"to{left:LEFTEND%;top:BOTBOTpx;width:0;height:0;}";
for(vari=0;i leftfrom=myRandom(15,85); lefttop=myRandom(30,70); toptop=myRandom(20,200); leftend=lefttop+(lefttop-leftfrom)/2; botbot=toptop+100; csscode=keyframes_template; csscode=csscode.replace(/LEFTFROM/,leftfrom); csscode=csscode.replace(/LEFTTOP/,lefttop); csscode=csscode.replace(/TOPTOP/,toptop); csscode=csscode.replace(/LEFTEND/,leftend); csscode=csscode.replace(/BOTBOT/,botbot); try{//WebKitbrowsers csscode2="@-webkit-keyframesflight_"+i+"{\n"+csscode+"\n}"; document.styleSheets[cssIdx].insertRule(csscode2,0); }catch(e){} try{//Mozillabrowsers csscode2="@-moz-keyframesflight_"+i+"{\n"+csscode+"\n}"; document.styleSheets[cssIdx].insertRule(csscode2,0); }catch(e){} } for(vari=0;i varrand=myRandom(0,flare_colours.length-1); varrand_colour=flare_colours[rand]; varlaunch_delay=myRandom(0,100)/10; csscode=".launcher:nth-child("+num_launchers+"n+"+i+"){\n" +"-webkit-animation-name:flight_"+i+";\n" +"-webkit-animation-delay:"+launch_delay+"s;\n" +"-moz-animation-name:flight_"+i+";\n" +"-moz-animation-delay:"+launch_delay+"s;\n" +"}"; document.styleSheets[cssIdx].insertRule(csscode,0); csscode=".launcher:nth-child("+num_launchers+"n+"+i+")div{" +"border-color:"+rand_colour+";\n" +"-webkit-animation-delay:"+launch_delay+"s;\n" +"-moz-animation-delay:"+launch_delay+"s;\n" +"}"; document.styleSheets[cssIdx].insertRule(csscode,0); } for(vari=0;i csscode=".launcherdiv:nth-child("+num_flares+"n+"+i+"){\n" +"-webkit-transform:rotate("+(i*360/num_flares)+"deg);\n" +"-moz-transform:rotate("+(i*360/num_flares)+"deg);\n" +"}"; document.styleSheets[cssIdx].insertRule(csscode,0); } for(vari=0;i varnewdiv=document.createElement("div"); newdiv.className="launcher"; for(varj=0;j newdiv.appendChild(document.createElement("div")); } document.getElementById("stage").appendChild(newdiv); } },false); 以上是"如何使用css3+js实现烟花绽放的动画效果"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
