Анимированные иконки могут сделать ваш сайт более привлекательным и интерактивным для посетителей. В этой статье мы рассмотрим, как добавить анимированные иконки на ваш сайт с помощью CSS и JavaScript.
Подключение библиотеки анимированных иконок
Для начала, нам нужно выбрать и подключить библиотеку анимированных иконок. Существует много бесплатных и платных библиотек, но в этой статье мы будем использовать бесплатную библиотеку Font Awesome.
- Перейдите на официальный сайт Font Awesome
- Зарегистрируйтесь и получите ссылку на файл стилей, которую нужно добавить в раздел
<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.
- Добавьте иконку из Font Awesome в ваш HTML-файл:
<i class="fas fa-spinner"></i>
- Определите анимацию с помощью ключевых кадров в вашем CSS-файле:
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- Примените анимацию к иконке:
.fas.fa-spinner {
animation: spin 2s linear infinite;
}
Теперь у вас есть анимированная иконка, которая вращается бесконечно 😊
Создание анимированных иконок с помощью JavaScript
Если вы хотите добавить еще больше интерактивности, вы можете использовать JavaScript для управления анимациями иконок. Вот пример анимации при наведении курсора:
- Добавьте иконку в ваш HTML-файл и добавьте класс
js-animate:
<i class="fas fa-heart js-animate"></i>
- Определите анимацию в вашем CSS-файле:
@keyframes heartbeat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
}
- Запустите анимацию при наведении курсора с помощью JavaScript:
document.querySelectorAll('.js-animate').forEach((icon) => {
icon.addEventListener('mouseover', () => {
icon.style.animation = 'heartbeat 0.5s alternate-reverse infinite';
});
icon.addEventListener('mouseout', () => {
icon.style.animation = '';
});
});
Теперь, когда вы наводите курсор на иконку сердца, она начинает биться 💓
Надеемся, что эта статья помогла вам разобраться, как добавить анимированные иконки на ваш сайт. Экспериментируйте с разными анимациями и стилями, чтобы сделать свой сайт уникальным и привлекательным для посетителей!
Добавить комментарий