Jak na to - Animace ikon
Naučte se používat ikony k vytvoření animovaného efektu.
Baterie se nabíjí
Krok 1) Přidejte HTML:
Příklad
<div id="charging" class="fa"></div>
Krok 2) Zahrňte knihovnu ikon Font Awesome:
Příklad
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Přečtěte si více o Font Awesome v našem kurzu Font Awesome .
Krok 3) Přidejte JavaScript:
Příklad
<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>
Příklad vysvětlen
Příklad vytváří dojem, že se baterie nabíjí, ale místo toho je zobrazeno pět různých ikon.
Volaná funkce chargebattery()
provádí veškeré nahrazení a zobrazení ikon.
Funkce se spustí zobrazením ikony prázdné baterie:
Po jedné sekundě je ikona nahrazena novou ikonou:
Ikona se každou sekundu nahradí novou ikonou, dokud „baterie není plně nabitá“:
Tento proces se opakuje každých 5 sekund, takže se zdá, že se baterie nabíjí.
Více animovaných ikon
Příklad
Příklad
Příklad
Příklad
Příklad
Příklad