css3+js如何實(shí)現(xiàn)煙花綻放的動(dòng)畫(huà)效果-創(chuàng)新互聯(lián)

小編給大家分享一下css3+js如何實(shí)現(xiàn)煙花綻放的動(dòng)畫(huà)效果，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比黃龍網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式黃龍網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋黃龍地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

動(dòng)畫(huà)的實(shí)現(xiàn)原理：

動(dòng)畫(huà)使用了兩個(gè)關(guān)鍵幀（keyframes）：

一個(gè)是煙花筒上升的軌跡，另一個(gè)是煙花綻放中的火星碎片。在這里你可以看到正在進(jìn)行的基本草圖：

css3+js如何實(shí)現(xiàn)煙花綻放的動(dòng)畫(huà)效果

每個(gè)煙花筒沿著場(chǎng)地底部的線分配一個(gè)隨機(jī)的起始位置。它還在標(biāo)記的區(qū)域內(nèi)分配了一個(gè)隨機(jī)目標(biāo)。當(dāng)煙花筒接近其目標(biāo)點(diǎn)時(shí)，它會(huì)縮小為不可見(jiàn)（0x0像素）。

此時(shí)，耀斑變得可見(jiàn)。這些實(shí)際上是一系列以徑向方式向外指向的DIV，在向外的尖端有一種顏色 - 就像火柴棍一樣。為了模擬爆炸，他們只是增加了長(zhǎng)度，使燈光向外移動(dòng)。

JavaScript用于：

1、將所有必需的元素添加到頁(yè)面（DOM）;

2、為每個(gè)煙花筒創(chuàng)建和分配關(guān)鍵幀 ; 和

3、指定顏色并將每個(gè)光斑旋轉(zhuǎn)到正確的位置。

代碼示例：

html代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>煙花綻放</title>
		<link rel="stylesheet" type="text/css" href="css-fireworks.css">
	</head>
	<body>
		<div id="stage"><!-- 動(dòng)畫(huà)效果發(fā)生在這里 --></div>
		<script type="text/javascript" src="css-fireworks.js"></script>
	</body>
</html>

css代碼（css-fireworks.css）

@-webkit-keyframes explosion {
  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-keyframes explosion {
  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: 100px auto;
  background: #000 url(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: 3px solid yellow;
}

.launcher div {
  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: 4px solid yellow;
  border-radius: 2px;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

js代碼（css-fireworks.js）

document.addEventListener("DOMContentLoaded", function() {
  var num_launchers = 12;
  var num_flares = 20;
  var flare_colours = ['red', 'aqua', 'violet', 'yellow', 'lightgreen', 'white', 'blue'];
  var cssIdx = document.styleSheets.length - 1;

  function myRandom(from, to)
  {
    return from + Math.floor(Math.random() * (to-from));
  }

  var keyframes_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(var i=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 { // WebKit browsers
      csscode2 = "@-webkit-keyframes flight_" + i + " {\n" + csscode + "\n}";
      document.styleSheets[cssIdx].insertRule(csscode2, 0);
    } catch(e) { }

    try { // Mozilla browsers
      csscode2 = "@-moz-keyframes flight_" + i + " {\n" + csscode + "\n}";
      document.styleSheets[cssIdx].insertRule(csscode2, 0);
    } catch(e) { }
  }

  for(var i=0; i < num_launchers; i++) {
    var rand = myRandom(0, flare_colours.length - 1);
    var rand_colour = flare_colours[rand];
    var launch_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(var i=0; i < num_flares; i++) {
    csscode = ".launcher div: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(var i=0; i < num_launchers; i++) {
    var newdiv = document.createElement("div");
    newdiv.className = "launcher";
    for(var j=0; j < num_flares; j++) {
      newdiv.appendChild(document.createElement("div"));
    }
    document.getElementById("stage").appendChild(newdiv);
  }
}, false);

看完了這篇文章，相信你對(duì)css3+js如何實(shí)現(xiàn)煙花綻放的動(dòng)畫(huà)效果有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：css3+js如何實(shí)現(xiàn)煙花綻放的動(dòng)畫(huà)效果-創(chuàng)新互聯(lián)
本文地址：http://muchs.cn/article28/pcgjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈、ChatGPT、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容