Hoe OM - Animeer ikone
Leer hoe om ikone te gebruik om 'n geanimeerde effek te maak.
Battery Laai
Stap 1) Voeg HTML by:
Voorbeeld
<div id="charging" class="fa"></div>
Stap 2) Sluit die Font Awesome-ikoonbiblioteek in:
Voorbeeld
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Lees meer oor Font Awesome in ons Font Awesome-tutoriaal .
Stap 3) Voeg 'n JavaScript by:
Voorbeeld
<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>
Voorbeeld Verduidelik
Die voorbeeld gee 'n indruk van 'n battery wat gelaai word, maar in plaas daarvan is dit vyf verskillende ikone wat vertoon word.
'n Funksie genaamd chargebattery()
doen al die vervanging en vertoon van ikone.
Die funksie begin deur 'n leë battery-ikoon te vertoon:
Na een sekonde word die ikoon vervang deur 'n nuwe ikoon:
Die ikoon word elke sekonde deur 'n nuwe ikoon vervang totdat "die battery ten volle gelaai is":
Hierdie proses word elke 5 sekondes herhaal, wat dit laat lyk asof die battery besig is om te laai.
Meer geanimeerde ikone
Voorbeeld
Voorbeeld
Voorbeeld
Voorbeeld
Voorbeeld
Voorbeeld