溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
