Cara - Menganimasikan Ikon
Pelajari cara menggunakan ikon untuk membuat efek animasi.
Pengisian Baterai
Langkah 1) Tambahkan HTML:
Contoh
<div id="charging" class="fa"></div>
Langkah 2) Sertakan Perpustakaan Ikon Font Awesome:
Contoh
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Baca lebih lanjut tentang Font Awesome di Tutorial Font Awesome kami .
Langkah 3) Tambahkan JavaScript:
Contoh
<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>
Contoh Dijelaskan
Contohnya memberi kesan baterai sedang diisi, tetapi yang ditampilkan adalah lima ikon berbeda.
Fungsi yang dipanggil chargebattery()
melakukan semua penggantian dan tampilan ikon.
Fungsi dimulai dengan menampilkan ikon baterai kosong:
.Setelah satu detik, ikon diganti dengan ikon baru:
.Ikon diganti dengan ikon baru setiap detik, hingga "baterai terisi penuh":
..
.
Proses ini diulang setiap 5 detik, sehingga seolah-olah baterai sedang diisi.
Lebih Banyak Ikon Animasi
Contoh
Contoh
Contoh
Contoh
Contoh
Contoh