Когда пользователь наводит курсор на текст (например, ссылку, заголовок или кнопку), его цвет плавно меняется. Это один из самых простых, но эффективных способов добавить интерактивности и визуальной обратной связи на сайт.
Это статья из цикла заметок по CSS анимации и эффектам.
Как это работает
Мы используем два основных инструмента CSS:
:hover— чтобы определить состояние, при котором меняется стиль;transition— чтобы анимация происходила плавно.
Пример, того как это выглядит (наведите курсор на текст):
Вот пример на чистом CSS / HTML
|
1 2 3 4 5 |
.fancy-link { color: #333; transition: color 0.3s ease; text-decoration: none; } |
|
1 2 3 |
.fancy-link:hover { color: #ff6600; } |
При наведении цвет текста меняется с тёмно-серого на оранжевый за 0.3 секунды.
Что можно улучшить
- Изменять не только цвет, но и другие свойства: например,
text-shadow,letter-spacingили дажеtransform: scale. - Использовать кастомные CSS-переменные для смены темы.
- Добавить подчеркивание, которое тоже анимируется.