Come fare per - Animare le icone
Scopri come utilizzare le icone per creare un effetto animato.
Batteria in carica
Passaggio 1) Aggiungi HTML:
Esempio
<div id="charging" class="fa"></div>
Passaggio 2) Includi la libreria di icone Font Awesome:
Esempio
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Leggi di più su Font Awesome nel nostro Tutorial Font Awesome .
Passaggio 3) Aggiungi un JavaScript:
Esempio
<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>
Esempio spiegato
L'esempio dà l'impressione di una batteria in carica, ma invece sono visualizzate cinque icone diverse.
Una funzione chiamata chargebattery()
esegue tutta la sostituzione e la visualizzazione delle icone.
La funzione inizia visualizzando un'icona di batteria scarica:
Dopo un secondo, l'icona viene sostituita da una nuova icona:
L'icona viene sostituita da una nuova icona ogni secondo, finché "la batteria è completamente carica":
Questo processo viene ripetuto ogni 5 secondi, facendo sembrare che la batteria si stia caricando.
Icone più animate
Esempio
Esempio
Esempio
Esempio
Esempio
Esempio