Как сделать анимацию при наведении курсора css

Hover — эффекты при наведении

Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.

Горизонтальная заполнение

Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.

Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:

 button:before

Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:

 button:hover:before

Вертикальное заполнение

Если анимировать высоту, то заполнение произойдёт сверху.

 button:before < content:''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: rgba(255,255,255,0.3); border-radius: 5px; transition: all 2s ease; >button:hover:before

Инвертирование цвета

Инвертируем цвет внутри кнопки и добавляем границу:

 button:hover

Пунктирная граница

Добавим границу у кнопки и инвертируем цвета:

 button < border: 3px solid #3a7999; >button:hover

Появление значка

При наведении значок плавно появиться слева от текста.

Подключим шрифт со значками Font Awesome.

Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:

 button

Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:

 button:before

Осталось установить свойство left:

 button:hover:before

Купи что-нибудь

Эффект подпрыгивания

Для данной анимации установим несколько ключевых кадров (keyframes):

 @keyframes bounce < 0%, 20%, 60%, 100% < transform: translateY(0); transform: translateY(0); >40% < transform: translateY(-20px); transform: translateY(-20px); >80% < transform: translateY(-10px); transform: translateY(-10px); >>

Подключаем созданную анимацию:

 button:hover

Искажение

В CSS3 появилась возможность использовать искажения:

 button:hover

3D-поворот

Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.

Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:

 button

Установим правила для псевдо-элемента after:

 button:after

Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:

 button:hover

Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.

Как сделать анимацию при наведении курсора css

Добавление анимации при наведении курсора происходит с помощью псевдокласса :hover . Создадим кнопку, которая будет менять цвет и свои границы при наведении на неё курсора.

 Нажми меня

button  border: 3px solid #3a7999; > button:hover  border: 3px dotted #3a7999; color: #3a7999; background: #38d9a9; >

Анимация ссылок при наведении

За стиль элемента при наведении на него курсора мыши отвечает свойство :hover. Например, вот как сделать, чтобы цвет ссылки менялся с зелёного на коричневый.

a < color:green; >a:hover

Сама смена цвета или других параметров, если они указаны, происходит мгновенно и чтобы сделать её плавной, к селектору a следует добавить свойство transition. В качестве значения указываем время перехода от одного цвета к другому. К примеру, здесь время перехода занимает полсекунды.

a < color:green; transition: 0.5s; >a:hover

Для ссылок таким методом допустимо менять параметры шрифта, цвет текста, фона, толщину рамки, её цвет и некоторые другие характеристики. Учтите, что не все свойства вообще можно таким способом анимировать. Если у свойства есть дискретные значения, то никакой плавности не ожидайте. Например, свойству text-decoration можно присвоить значение none или underline . Это означает, что ссылки могут находиться только в двух состояниях: с подчёркиванием и без него.

В примере 1 показано добавление линии снизу через border-bottom. Первоначально толщина линии равна нулю, поэтому она у ссылок не отображается. При наведении на ссылку курсора мыши толщина линии плавно увеличивается до трёх пикселей.

Пример 1. Использование border-bottom

Таким же образом можно изменить не только цвет текста, но и цвет фона, или одновременно и то и другое. В примере 2 при наведении курсора на ссылку происходит смена цвета фона с серого на синий.

Пример 2. Использование background

Кроме непосредственной замены значений свойств ссылки можно трансформировать через свойство transform. Сюда входят всякие искажения, вроде поворота, масштабирования, смещения и др. Вот как будет выглядеть одновременный поворот и сдвиг при наведении (пример 3).

Пример 3. Использование transform

Свойство transform не работает непосредственно для строчных элементов, которыми ссылки являются по умолчанию. Поэтому их надо превратить в блочные или строчно-блочные элементы через свойство display со значением inline-block .

Для понимания работы свойства display рекомендуем пройти курс Блочные и строчные элементы.

Использование псевдоэлементов

Псевдоэлемент создаётся при помощи ключевых слов ::before и ::after, которые слитно пишутся после имени селектора. Сам псевдоэлемент представляет собой подэлемент, который вставляется до или после содержимого самого элемента. В случае ссылок:

a::before — подэлемент до содержимого элемента ;
a::after — после содержимого элемента .

Сам код HTML остаётся исходным, никаких дополнительных частей к ссылкам мы не прибавляем, само формирование псевдоэлементов выполняется через CSS. Вот как их можно представить:

a::before — [Псевдоэлемент]Содержимое a::after — Содержимое[Псевдоэлемент]

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

В примере 4 показано добавление красной линии толщиной в один пиксель ниже текста ссылки через псевдоэлемент ::after .

Пример 4. Использование ::after

Давайте построчно разберём данный код CSS.

content: '';

Свойство content добавляет содержимое к псевдоэлементу и без него наш дальнейший код работать не будет. Пустые кавычки показывают, что содержимого как такового нет, поскольку нам требуется только цветной прямоугольник без какого-либо текста внутри.

position: relative + position: absolute

Эта комбинация у элемента и псевдоэлемента позволяет задавать его положение относительно краёв элемента через свойства left, top, right и bottom.

Для понимания работы свойства position рекомендуем пройти курс Позиционирование элементов.

left: 0; bottom: 0

Псевдоэлемент располагается по левому и нижнему краям элемента .

background-color: red

Цвет фона псевдоэлемента, в данном случае красный.

z-index: -1

Псевдоэлемент выводится поверх текста ссылки и своим фоном может перекрывать его. Чтобы этого не случилось, по оси Z располагаем псевдоэлемент ниже.

width: 100%

Ширина нашего псевдоэлемента. Из-за пустого содержимого подэлемент будет нулевой ширины и высоты, поэтому эти параметры следует задать явно.

height: 1px

Желаемая высота псевдоэлемента. Поскольку нам нужна линия толщиной в один пиксель, это же значение указываем в свойстве height. Если поставить 2px, то толщина линии, соответственно, будет два пикселя.

Созданную таким образом линию можно анимировать при наведении на ссылку курсора мыши, меняя нужные нам параметры. Но уже не у самого a::after , а у селектора a:hover::after .

В примере 5 при наведении на ссылку линия снизу увеличивается на всю высоту ссылки.

Пример 5. Изменение псевдоэлемента ::after при наведении

Заметьте, что здесь transition добавляется к селектору a::after , потому что именно псевдоэлемент меняет свои параметры при наведении.

Схожим образом можно делать и другие эффекты, взяв за основу пример 2 и незначительно меняя в нём некоторые свойства и значения. Вот линия толщиной три пикселя, движущаяся слева направо.

a::after < width: 0; /* Линия не видна */ height: 3px; /* Высота линии */ >a:hover::after < width: 100%; /* Линия занимает всю ширину */ >

Если у height поставить 100%, то это будет уже не линия, а фон под ссылкой.

a::after < width: 0; /* Фон не виден */ height: 100%; /* Вся высота */ >a:hover::after < width: 100%; /* Весь фон */ >

Использование градиента

Интересные эффекты при наведении получаются при использовании линейного градиента. Он делается следующим образом.

background-image: linear-gradient(to left, red, blue)

В параметрах функции linear-gradient() сперва указывается направление градиента (в данном случае to left означает влево), затем начальный и конечный цвета. Если эти цвета задать одинаковыми, то получим однотонный фон без всякого градиента.

Градиент является фоновым изображением, поэтому к нему применимы следующие стилевые свойства:

background-repeat — повторение фона;
background-position — точка, откуда начинается фон;
background-size — размер фона.

Пример 6. Движение градиента слева направо

Задать разное направление движения градиента можно через комбинацию свойств background-position , которое определяет начальную позицию фона, и background-size , устанавливающее размер фона. В табл. 1 показан код CSS, его надо включить в пример 6 для получения желаемого движения градиента.

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

Схожим образом делается градиентная линия, меняющая свои параметры при наведении на элемент. В примере 7 возле ссылок отображается прямоугольник размером 10×2 пикселя. При наведении курсора мыши на ссылку прямоугольник увеличивается на всю ширину ссылки.

Пример 7. Создание линии через градиент

Итоги

За стиль элемента при наведении на него курсора мыши отвечает псевдокласс :hover.
Плавный переход от одного значения к другому при наведении делается с помощью свойства transition, которое устанавливает время перехода.
:hover можно комбинировать с псевдоэлементами ::before и ::after для добавления к ссылке дополнительного декоративного оформления.
Схожего результата можно добиться, используя фон, созданный с помощью линейного градиента. Меняя параметры фона можно добиться различных эффектов при наведении курсора на ссылку.

Автор: Влад Мержевич
Последнее изменение: 24.04.2023

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже текста появляется линия толщиной 3 пикселя и цветом #e0591e.

Меню

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню из левого нижнего угла расширяется фон цветом #ffb21d на всю область ссылки.

Меню

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже и выше текста появляются линии толщиной 2 пикселя и цветом #2ecc71.

См. также

:focus на мобильных устройствах
background-size
content
quotes
relative и absolute
transition
Аккордеон меню
Анимация кнопок при наведении
Атрибуты ссылок
Виды ссылок
Всплывающая подсказка
Добавление тени
Использование :hover
Масштабирование фона
Не только текст
Несколько фоновых картинок
Нормальное позиционирование
Очистка float
Переходы
Переходы и анимация
Переходы с помощью :hover
Подробнее о позиционировании
Подсветка строк и колонок таблицы
Псевдокласс :hover
Псевдоклассы в CSS
Псевдоэлемент ::after
Псевдоэлементы
Псевдоэлементы ::after и ::before
Работа с типографикой
Селекторы CSS
Состояния кнопок
Сочетание с псевдоклассами
Типы ссылок
Установка фона и градиента

Рецепты

Как выделить цветом строку таблицы при наведении?
Как добавить адрес к тексту ссылки?
Как добавить всплывающую подсказку к тексту?
Как изменить вид маркера списка?
Как изменить стиль чисел в списке?
Как изменить цвет маркеров в списке?
Как изменить цвет ссылки при наведении?
Как плавно изменить цвет ссылки?
Как сделать нумерацию русскими буквами?
Как сделать подчёркивание заголовка?
Как сделать ссылку для скачивания?
Как сделать ссылку на адрес электронной почты?
Как сделать фоновую картинку на всю ширину?
Как увеличить картинку при наведении?
Как указать язык сайта по ссылке?

Как переместить элемент при наведении

Эффекты анимации при наведении, используемые на современных веб-сайтах, стали более изощренными. Одним из примеров эффекта является перемещение элемента при наведении. Вы можете добавить движение элемента при наведении. Добавьте или выберите элемент и перейдите на панель свойств. Нажмите на ссылку Hover и установите флажок Hover. Установите значения для свойства Move X, Y.