Jak to zrobić — animować ikony
Dowiedz się, jak używać ikon do tworzenia animowanych efektów.
Ładowanie baterii
.
Krok 1) Dodaj kod HTML:
Przykład
<div id="charging" class="fa"></div>
Krok 2) Dołącz bibliotekę czcionek Awesome Icon:
Przykład
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Przeczytaj więcej o Font Awesome w naszym samouczku Font Awesome .
Krok 3) Dodaj JavaScript:
Przykład
<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>
Przykład wyjaśniony
Przykład sprawia wrażenie ładowania baterii, ale zamiast tego jest wyświetlanych pięć różnych ikon.
Wywoływana funkcja chargebattery()
zajmuje się zastępowaniem i wyświetlaniem ikon.
Funkcja rozpoczyna się od wyświetlenia ikony pustej baterii:
.Po sekundzie ikona zostaje zastąpiona nową ikoną:
.Ikona jest zastępowana nową ikoną co sekundę, dopóki „akumulator nie będzie w pełni naładowany”:
..
.
Ten proces jest powtarzany co 5 sekund, przez co wydaje się, że bateria się ładuje.
Więcej animowanych ikon
Przykład
Przykład
Przykład
Przykład
Przykład
Przykład