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

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

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

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

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

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

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

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

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

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

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

Анимация свечения (мерцание)

Апрель 18, 2025 г.

Здесь мы разбираем CSS анимацию - мерцание. Это статья из цикла заметок по CSS анимации и эффектам. Эта анимация создаёт эффект мягкого свечения вокруг элемента, будто он излучает свет. Часто используется для привлечения внимания к кнопкам, ...

Читать

CSS-анимация: Эффект пульсации

Май 1, 2025 г.

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

Читать

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

Слайд-ин: элемент "въезжает" с края

Апрель 29, 2025 г.

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

Читать
 

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

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



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