这篇文章主要为大家展示了“如何使用css3+js实现烟花绽放的动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用css3+js实现烟花绽放的动画效果”这篇文章吧。
每个烟花筒沿着场地底部的线分配一个随机的起始位置。它还在标记的区域内分配了一个随机目标。当烟花筒接近其目标点时，它会缩小为不可见（0x0像素）。
此时，耀斑变得可见。这些实际上是一系列以径向方式向外指向的DIV，在向外的尖端有一种颜色-就像火柴棍一样。为了模拟爆炸，他们只是增加了长度，使灯光向外移动。
JavaScript用于：
1、将所有必需的元素添加到页面（DOM）;
2、为每个烟花筒创建和分配关键帧;和
3、指定颜色并将每个光斑旋转到正确的位置。
代码示例：
html代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>烟花绽放</title>
<linkrel="stylesheet"type="text/css"href="css-fireworks.css">
</head>
<body>
<divid="stage"><!--动画效果发生在这里--></div>
<scripttype="text/javascript"src="css-fireworks.js"></script>
</body>
</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<num_launchers;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<num_launchers;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<num_flares;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<num_launchers;i++){
varnewdiv=document.createElement("div");
newdiv.className="launcher";
for(varj=0;j<num_flares;j++){
newdiv.appendChild(document.createElement("div"));
}
document.getElementById("stage").appendChild(newdiv);
}
},false);
以上是“如何使用css3+js实现烟花绽放的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
