Как сделать - анимировать иконки
Узнайте, как использовать значки, чтобы сделать анимированный эффект.
Зарядка аккумулятора
Шаг 1) добавить HTML:
Пример
<div id="charging" class="fa"></div>
Шаг 2) включить шрифт Awesome Библиотека иконок:
Пример
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Подробнее о шрифт Awesome в нашем Шрифт Awesome учебник.
Шаг 3) добавить 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>
Пример как работает
Пример дает впечатление батареи получая поручено, но вместо оно 5 по-разному иконы будучи показанным.
Вызванная функция chargebattery()
делает все заменять и показывать иконы.
Функция запускается, отображая пустой значок аккумулятора:
Через одну секунду значок заменяется новым значком:
Иконка заменяется новой иконкой каждую секунду, пока "батарея полностью заряжена":
Этот процесс повторяется каждые 5 секунд, что делает его похоже, что батарея зарядки.
Другие анимированные значки
Пример
Пример
Пример
Пример
Пример
Пример