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