Как создать: анимационные значки

Узнайте, как использовать значки для создания анимационных эффектов.

Зарядка батареи

Попробуйте сами

Шаг 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 Для получения дополнительной информации о Font 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>

Попробуйте сами

Объяснение примера:

Этот пример создает впечатление, что аккумулятор заряжается, но на самом деле отображаются пять разных значков.

Функция под названием chargebattery() Эта функция отвечает за замену и отображение всех значков.

Эта функция сначала показывает значок пустого аккумулятора:

Через одну секунду значок заменяется новым значком:

Каждую секунду используется новый значок для замены текущего, до тех пор, пока "батарея не будет полностью заряжена":

Этот процесс повторяется каждые 5 секунд, создавая впечатление, что аккумулятор заряжается.

Больше анимационных значков

Пример

Попробуйте сами

Пример

Попробуйте сами

Пример

Попробуйте сами

Пример

Попробуйте сами

Пример

Попробуйте сами

Пример

Попробуйте сами