Анимация: Изменение цвета текста при наведении

Когда пользователь наводит курсор на текст (например, ссылку, заголовок или кнопку), его цвет плавно меняется. Это один из самых простых, но эффективных способов добавить интерактивности и визуальной обратной связи на сайт.

Это статья из цикла заметок по CSS анимации и эффектам.

Как это работает

Мы используем два основных инструмента CSS:

  • :hover — чтобы определить состояние, при котором меняется стиль;
  • transition — чтобы анимация происходила плавно.

Пример, того как это выглядит (наведите курсор на текст):

Вот пример на чистом CSS / HTML

При наведении цвет текста меняется с тёмно-серого на оранжевый за 0.3 секунды.

Что можно улучшить

Мало букафф? Читайте есчо !

Плавающее движение вверх-вниз с помощью CSS

Май 1, 2025 г.

Этот эффект создаёт иллюзию, будто элемент "плавает" в воздухе — мягко покачиваясь вверх и вниз. Он отлично подходит для украшений, иконок, стрелок прокрутки или просто акцентов, которые должны привлекать внимание, но не быть слишком навязчивыми. Это ...

Читать

Медленное вращение — добавим динамики логотипу

Апрель 24, 2025 г.

Небольшая анимация — отличный способ добавить интерактивности и "отзывчивости" вашему интерфейсу. Один из простейших и эффектных способов «оживить» сайт — это плавное вращение элемента. Чаще всего такой приём используют для логотипа, иконки загрузки или ...

Читать

Анимация "Прыгающий элемент" (bounce)

Апрель 24, 2025 г.

Эффект подпрыгивания делает элемент визуально более "живым" и может привлечь внимание пользователя, особенно если использовать его на кнопке, иконке или уведомлении. Это статья из цикла заметок по CSS анимации и эффектам. Как работает bounce ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать
 

Комментарии к «Анимация: Изменение цвета текста при наведении»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: