Анимация текста при наведении мыши

Случайно нашел интересный и очень простой эффект подсветки текста при наведении мыши. Выглядит подсветка довольно эффектно – при наведении мыши, фон текста, построчно и плавно заливается другим цветом, получается скользящая лента.

Пример анимации при наведении мыши

Давайте рассмотрим, как я это сделал эту анимацию.

В коде HTML нам понадобится любой тег. Я выбрал гиперссылку. Все остальные элементы введены для удобства и не играют никакой роли.

Перейдем к CSS. Классу .fun-hover добавил фон в виде градиента. Обратите внимание, что я специально сделал градиент без плавного перехода. Важной особенностью работы является задание свойств background-position: 0 и background-size: 200% которые будут меняться в анимации. Обратите внимание, часть градиента, из-за его размера 200% просто не видно. Именно он будет появляться при анимации.

При наведении мыши происходит прокрутка background и фон сменяется второй частью градиента, который был скрыт до текущего мгновения.

Итак, полный код:

Посмотреть и пощупать эффект в живую можно на CodePen.

See the Pen CSS3 hover effect by Alex (@Asmodey) on CodePen.

Анимация текста при наведении мыши: 1 комментарий

  1. Vreditel

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

Добавить комментарий для Vreditel Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *