Jak tworzyć: animowane ikony

Naucz się, jak używać ikon do tworzenia efektów animacji.

ładowanie akumulatora

Spróbuj sam

Krok pierwszy - Dodaj HTML:

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

Krok drugi - Zawrzyj bibliotekę ikon Font Awesome:

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

W naszym Tutorial Font Awesome dowiedz się więcej o Font Awesome.

Krok trzeci - Dodaj 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>

Spróbuj sam

Wyjaśnienie przykładu:

Ten przykład daje wrażenie, że akumulator się ładuje, ale w rzeczywistości wyświetla pięć różnych ikon.

Funkcja o nazwie chargebattery() funkcja ta odpowiada za zastępowanie i wyświetlanie wszystkich ikon.

Ta funkcja najpierw wyświetla ikonę pustego akumulatora:

Po jednym sekundzie, ikona zostaje zastąpiona nową ikoną:

Każda sekunda zastępuje bieżący ikonę nową, aż do "akumulator jest naładowany":

Ten proces powtarza się co 5 sekund, co daje wrażenie, że akumulator się ładuje.

Więcej animowanych ikon

Przykład

Spróbuj sam

Przykład

Spróbuj sam

Przykład

Spróbuj sam

Przykład

Spróbuj sam

Przykład

Spróbuj sam

Przykład

Spróbuj sam