Wie wird es erstellt: animierte Symbole

Lernen Sie, wie Sie Animationseffekte mit Symbolen erstellen.

Akku aufladen

Try it yourself

Erster Schritt - Fügen Sie HTML hinzu:

<div id="charging" class="fa"></div>

Zweiter Schritt - Fügen Sie die Font Awesome Symbolbibliothek hinzu:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

In unserem Font Awesome tutorial Erfahren Sie mehr über Font Awesome.

Dritter Schritt - Fügen Sie JavaScript hinzu:

<script>
function chargebattery() {
  var a;
  a = document.getElementById("charging");
  a.innerHTML = "";
  setTimeout(function () {
    a.innerHTML = "";
  }, 1000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 2000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 3000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>

Try it yourself

Beispiel explanation:

Dieser Beispielcode gibt den Eindruck, als ob der Akku aufgeladen wird, zeigt aber tatsächlich fünf verschiedene Symbole.

Eine Funktion namens chargebattery() Diese Funktion ist für die Ersetzung und Anzeige aller Symbole verantwortlich.

Diese Funktion zeigt zunächst ein Symbol für eine leere Batterie an:

Nach einer Sekunde wird das Symbol durch ein neues Symbol ersetzt:

Jede Sekunde wird das aktuelle Symbol durch ein neues Symbol ersetzt, bis "Akku vollständig aufgeladen" angezeigt wird:

Dieser Prozess wiederholt sich alle 5 Sekunden und gibt den Eindruck, als ob der Akku aufgeladen wird.

More animation icons

Example

Try it yourself

Example

Try it yourself

Example

Try it yourself

Example

Try it yourself

Example

Try it yourself

Example

Try it yourself