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

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

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

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

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

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

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

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

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

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

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

Плавное появление текста по буквам

Апрель 20, 2025 г.

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

Читать

Анимация подчеркивания текста при наведении

Апрель 28, 2025 г.

Классический эффект: при наведении на ссылку или текст появляется анимированное подчеркивание. Вместо обычного text-decoration: underline, подчеркивание создаётся с помощью псевдоэлементов (::after или ::before) и плавно анимируется. Это выглядит современно ...

Читать

Эффект бегущей строки на CSS

Апрель 24, 2025 г.

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS. ...

Читать

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

Апрель 26, 2025 г.

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

Читать
 

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

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



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