Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
23 Июн 2023
2 мин
164

Как создать сайт с использованием анимированных иконок

Узнайте, как создать привлекательный и интерактивный сайт с анимированными иконками, используя CSS и JavaScript, в нашей практической статье!

Анимированные иконки могут сделать ваш сайт более привлекательным и интерактивным для посетителей. В этой статье мы рассмотрим, как добавить анимированные иконки на ваш сайт с помощью CSS и JavaScript.

Подключение библиотеки анимированных иконок

Для начала, нам нужно выбрать и подключить библиотеку анимированных иконок. Существует много бесплатных и платных библиотек, но в этой статье мы будем использовать бесплатную библиотеку Font Awesome.

  1. Перейдите на официальный сайт Font Awesome
  2. Зарегистрируйтесь и получите ссылку на файл стилей, которую нужно добавить в раздел <head> вашего HTML-файла.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous">

Создание анимированных иконок с помощью CSS

Теперь, когда мы подключили библиотеку, давайте создадим анимированные иконки с использованием CSS.

  1. Добавьте иконку из Font Awesome в ваш HTML-файл:
<i class="fas fa-spinner"></i>
  1. Определите анимацию с помощью ключевых кадров в вашем CSS-файле:
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
  1. Примените анимацию к иконке:
.fas.fa-spinner {
  animation: spin 2s linear infinite;
}

Теперь у вас есть анимированная иконка, которая вращается бесконечно 😊

Создание анимированных иконок с помощью JavaScript

Если вы хотите добавить еще больше интерактивности, вы можете использовать JavaScript для управления анимациями иконок. Вот пример анимации при наведении курсора:

  1. Добавьте иконку в ваш HTML-файл и добавьте класс js-animate:
<i class="fas fa-heart js-animate"></i>
  1. Определите анимацию в вашем CSS-файле:
@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}
  1. Запустите анимацию при наведении курсора с помощью JavaScript:
document.querySelectorAll('.js-animate').forEach((icon) =&gt; {
  icon.addEventListener('mouseover', () =&gt; {
    icon.style.animation = 'heartbeat 0.5s alternate-reverse infinite';
  });

  icon.addEventListener('mouseout', () =&gt; {
    icon.style.animation = '';
  });
});

Теперь, когда вы наводите курсор на иконку сердца, она начинает биться 💓

Надеемся, что эта статья помогла вам разобраться, как добавить анимированные иконки на ваш сайт. Экспериментируйте с разными анимациями и стилями, чтобы сделать свой сайт уникальным и привлекательным для посетителей!

Добавить комментарий