Hvordan man skaber: animation ikoner

Lær hvordan du bruger ikoner til at lave animationseffekter.

Batteriladning

Eksempel

Første trin - Tilføj HTML:

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

Andet trin - Inkluder Font Awesome ikonbiblioteket:

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

i vores Font Awesome vejledning for at få mere information om Font Awesome.

Tredje trin - Tilføj 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>

Eksempel

Eksempel forklaring:

Dette eksempel gør indtryk af, at batteriet lader, men faktisk vises der fem forskellige ikoner.

En funktion ved navn chargebattery() denne funktion er ansvarlig for at erstatte og vise alle ikoner.

Denne funktion viser først et tomt batteri-ikon:

Efter et sekund bliver ikonet erstattet af et nyt ikon:

Hver sekund vil en ny ikon erstattes af det nuværende ikon, indtil "batteriet er fuldtladt":

Dette processen gentager sig hver 5 sekund, hvilket gør det til at føles som om batteriet lader.

更多动画图标

Mere animationsikoner

Eksempel

Mere animationsikoner

Eksempel

Mere animationsikoner

Eksempel

Mere animationsikoner

Eksempel

Mere animationsikoner

Eksempel

Mere animationsikoner

Eksempel