Cara membuat: ikon animasi

Belajar cara menggunakan ikon untuk membuat efek animasi.

Pembaruan baterai

Coba sendiri

Tahap pertama - Tambahkan HTML:

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

Tahap kedua - Sertakan pustaka ikon Font Awesome:

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

di Panduan Font Awesome untuk mendapatkan informasi lebih lanjut tentang Font Awesome.

Tahap ketiga - Tambahkan 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>

Coba sendiri

Pengertian contoh:

Contoh ini menunjukkan kesan bahwa baterai sedang diisi daya, tetapi kenyataannya menampilkan lima ikon yang berbeda.

Fungsi dengan nama chargebattery() Fungsi ini bertanggung jawab atas penggantian dan pertunjukan semua ikon.

Fungsi ini pertama-tama menampilkan ikon baterai kosong:

Setelah 1 detik, ikon ini digantikan ikon baru:

Setiap detik, ikon baru akan menggantikan ikon saat ini sampai "baterai penuh":

Proses ini diulang setiap 5 detik, membuatkan kesan bahwa baterai sedang diisi daya.

Banyak ikon animasi lainnya

Contoh

Coba sendiri

Contoh

Coba sendiri

Contoh

Coba sendiri

Contoh

Coba sendiri

Contoh

Coba sendiri

Contoh

Coba sendiri