Gewusst wie: Symbole animieren
Erfahren Sie, wie Sie Symbole verwenden, um einen animierten Effekt zu erzielen.
Aufladen des Akkus
Schritt 1) HTML hinzufügen:
Beispiel
<div id="charging" class="fa"></div>
Schritt 2) Fügen Sie die Font Awesome Icon Library hinzu:
Beispiel
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Lesen Sie mehr über Font Awesome in unserem Font Awesome Tutorial .
Schritt 3) Fügen Sie ein JavaScript hinzu:
Beispiel
<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>
Beispiel erklärt
Das Beispiel vermittelt den Eindruck eines aufgeladenen Akkus, stattdessen werden fünf verschiedene Symbole angezeigt.
Eine aufgerufene Funktion chargebattery()
erledigt das gesamte Ersetzen und Anzeigen von Symbolen.
Die Funktion startet mit der Anzeige eines leeren Batteriesymbols:
Nach einer Sekunde wird das Symbol durch ein neues Symbol ersetzt:
Das Symbol wird jede Sekunde durch ein neues Symbol ersetzt, bis "der Akku vollständig aufgeladen ist":
Dieser Vorgang wird alle 5 Sekunden wiederholt, sodass es so aussieht, als würde der Akku aufgeladen.
Mehr animierte Symbole
Beispiel
Beispiel
Beispiel
Beispiel
Beispiel
Beispiel