Hur skapas: Animerade ikoner

Lär dig hur du använder ikoner för att skapa animerade effekter.

Batteriladdning

Prova själv

Steg ett - Lägg till HTML:

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

Steg två - Inkludera Font Awesome ikonbiblioteket:

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

I vår Font Awesome-guide För mer information om Font Awesome.

Steg tre - Lägg till JavaScript:

<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>

Prova själv

Exempel förklaring:

Detta exempel ger intrycket att batteriet laddas, men visar faktiskt fem olika ikoner.

En funktion vid namn chargebattery() Funktionen ansvarar för alla ikoners ersättning och visning.

Funktionen visar först en tom batteriikon:

Efter ett sekund ersätts ikonen med en ny ikon:

Varje sekund ersätts den aktuella ikonen med en ny ikon, tills "batteriet är fullt":

Denna process upprepas varje 5 sekunder, vilket ger en känsla av att batteriet laddas.

Fler animerade ikoner

Exempel

Prova själv

Exempel

Prova själv

Exempel

Prova själv

Exempel

Prova själv

Exempel

Prova själv

Exempel

Prova själv