Heim > Artikel > Web-Frontend > CSS3 + js realisiert den Animationseffekt des blühenden Feuerwerks (Codebeispiel)

CSS3 + js realisiert den Animationseffekt des blühenden Feuerwerks (Codebeispiel)

青灯夜游Original: 2018-11-06 17:49:355321Durchsuche

In diesem Artikel erfahren Sie, wie Sie den Animationseffekt eines blühenden Feuerwerks mithilfe der Transformationsattribute und Keyframes-Attribute von js + css3 erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Schauen wir uns zunächst den Effekt an:

Das Umsetzungsprinzip der Animation:

Animationsverwendung Es werden zwei Schlüsselbilder erstellt:

Eines ist die aufsteigende Flugbahn der Feuerwerksröhre und das andere sind die Funkenfragmente im aufblühenden Feuerwerk. Hier können Sie die Grundskizze in Bearbeitung sehen:

CSS3 + js realisiert den Animationseffekt des blühenden Feuerwerks (Codebeispiel)

Jeder Feuerwerksröhre ist entlang der Linie am unteren Rand eine zufällige zugewiesen Feld-Startposition. Außerdem wird innerhalb des markierten Bereichs ein zufälliges Ziel zugewiesen. Wenn sich die Feuerwerksröhre ihrem Zielpunkt nähert, schrumpft sie auf unsichtbar (0x0 Pixel).

An diesem Punkt wird der Aufflackern sichtbar. Dabei handelt es sich eigentlich um eine Reihe von DIVs, die radial nach außen zeigen und an der äußeren Spitze eine Farbe haben – wie ein Streichholz. Um eine Explosion zu simulieren, vergrößerten sie einfach die Länge und bewegten das Licht nach außen.

JavaScript wird verwendet für:

1. Fügen Sie alle erforderlichen Elemente zur Seite hinzu (DOM);

2 und weisen Sie der Feuerwerksröhre Keyframes zu und

3. Geben Sie Farben an und drehen Sie jeden Lichtpunkt in die richtige Position.

Codebeispiel:

HTML-Code:

<!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"><!-- 动画效果发生在这里 --></div>
		<script type="text/javascript" src="css-fireworks.js"></script>
	</body>
</html>

CSS-Code (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-Code (css-fireworks.js)

document.addEventListener("DOMContentLoaded", function() {
  var num_launchers = 12;
  var num_flares = 20;
  var flare_colours = [&#39;red&#39;, &#39;aqua&#39;, &#39;violet&#39;, &#39;yellow&#39;, &#39;lightgreen&#39;, &#39;white&#39;, &#39;blue&#39;];
  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);

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Sie können es selbst ausprobieren, um Ihr Verständnis zu vertiefen. Ich hoffe, dass es für alle beim Lernen hilfreich sein wird: CSS3-Tutorial!

Das obige ist der detaillierte Inhalt vonCSS3 + js realisiert den Animationseffekt des blühenden Feuerwerks (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie implementiert man eine Fortschrittsverfolgungsleiste mithilfe von CSS? (Codebeispiel)Nächster Artikel：Wie implementiert man eine Fortschrittsverfolgungsleiste mithilfe von CSS? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen