Как сделать анимацию ссылки в html

CSS: Анимация подчёркивания ссылок

Недавно я добавил в этот блог простой визуальный эффект, который мне быстро понравился: когда вы наводите курсор на ссылку, анимированное подчёркивание ссылки раскрывается из центра. Создать этот эффект на удивление легко и не требует добавления каких-либо дополнительных элементов в DOM HTML.

Первое, что нам нужно сделать для анимации подчёркивания ссылок с помощью CSS. Это установить для CSS свойства text-decoration значение none и для position значение relative . Что бы мы могли позиционировать нашу линию подчёркивающую ссылку относительно ссылки. Для простоты мы также позаботимся о том, что бы ссылка не меняла цвет при наведении курсора:

a  
position: relative; 
color: #000; 
text-decoration: none; 
> 
 
a:hover  
color: #000; 
>

Далее добавим линию, в роли которой будет выступать нижний бордюр, и скроем её с помощью CSS трансформации. Мы можем сделать это используя CSS псевдо элемент ::before , что бы скрыть её установив масштаб по оси X равным 0 :

a::before  
content: ""; 
position: absolute; 
display: block; 
width: 100%; 
height: 2px; 
bottom: 0; 
left: 0; 
background-color: #000; 
transform: scaleX(0); 
transition: transform 0.3s ease; 
>

В самом низу, мы указываем элементу анимировать изменения CSS трансформации transform с длительностью в 0.3 секунды. Что бы линия появилась нам нужно просто сделать её видимой, при наведении курсора на ссылку ( :hover ), установив масштаб по оси X равный 1 :

a:hover::before  
transform: scaleX(1); 
>

При этом мы получаем расширяющееся подчёркивание ссылки с помощью CSS при наведении курсора на ссылку:

Вот весь код, что мы написали:

a  
position: relative; 
color: #000; 
text-decoration: none; 
> 
 
a:hover  
color: #000; 
> 
 
a::before  
content: ""; 
position: absolute; 
display: block; 
width: 100%; 
height: 2px; 
bottom: 0; 
left: 0; 
background-color: #000; 
transform: scaleX(0); 
transition: transform 0.3s ease; 
> 
 
a:hover::before  
transform: scaleX(1); 
>

Изменение направления анимации линии ссылки

Мы можем изменить направление анимации ссылки при наведении курсора, настроив CSS свойство transform-origin . Это представляет собой исходную точку CSS трансформации элемента. По умолчанию, она установлено на средину объекта, поэтому масштаб элемента изменяется от центральной точки элемента. Что бы CSS анимация началась слева, мы можем установить исходную точку в крайнее левое положение ( transform-origin: top left ), а для анимации справа, мы можем установить начальную точку в крайнее правое положение ( transform-origin: top right ):

Для изменения направления анимации, объявите CSS свойство transform-origin в псевдо элементе ::before , вот так:

/* CSS анимация линии с левого края */ 
a::before  
content: ""; 
position: absolute; 
display: block; 
width: 100%; 
height: 2px; 
bottom: 0; 
left: 0; 
background-color: #000; 
transform: scaleX(0); 
transform-origin: top left; 
transition: transform 0.3s ease; 
> 
 
/* CSS анимация линии с правого края */ 
a::before  
content: ""; 
position: absolute; 
display: block; 
width: 100%; 
height: 2px; 
bottom: 0; 
left: 0; 
background-color: #000; 
transform: scaleX(0); 
transform-origin: top right; 
transition: transform 0.3s ease; 
>

С помощью CSS мы научились создавать анимированное подчёркивание ссылки, выезжающее в заданную сторону при наведении курсора мыши на ссылку.

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

За стиль элемента при наведении на него курсора мыши отвечает свойство :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
Состояния кнопок
Сочетание с псевдоклассами
Типы ссылок
Установка фона и градиента
Что это такое?

Рецепты

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

Подчеркивание ссылок при наведении

У ссылок есть стандартное подчеркивание, которое нельзя красиво анимировать, чтобы его отключить необходимо воспользоваться свойством text-decoration .

text-decoration: none

Создаем свое подчеркивание

Для создания собственного подчеркивание используем псевдоэлемент и расположим его абсолютно относительно ссылки. Сделаем ему ширину 100%, высоту 1px, добавим цвет на фон и расположим снизу ссылки.

.link < position: relative; >.link::after

Анимируем подчеркивание ссылки

Чтобы анимировать наше подчеркивание, изменим его ширину на 0 и при наведении на ссылку будем увеличивать его до 100%. Плавность анимации делаем с помощью свойства transition .

.link::after < width: 0; transition: 0.3s; >.link:hover:after

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

У нас получилась анимация подчеркивания слева направо. Чтобы сделать анимацию от центра в стороны, необходимо начальное положение псевдоэлемента сделать по центру.

.link::after

Вот примеры различных анимаций подчеркивания:

Подчеркивание многострочной ссылки

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

Для обхода данной проблемы мы воспользуемся свойстовом background и линейным градиентом.

.link

Фоны идеально обтекают текст, даже когда он переносится на новую строку, а благодаря свойствам, таким как background-size и background-position , мы можем с высокой точностью контролировать их вид и поведение.

Для анимации данного способа необходимо при ховере менять background-size :

.link < background-size: 0 1px; transition: 0.3s; >.link:hover

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

Вот например волнистое и пунктирное подчеркивание:

4 способа анимировать цвет текстовой ссылки при наведении

Давайте создадим чистый CSS-эффект, который меняет цвет текстовой ссылки при наведении… но вставьте этот новый цвет вместо простой замены цветов.

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

Техника 1: Использование background-clip: text

На момент написания статьи background-clip: text это экспериментальная функция, которая не поддерживается в Internet Explorer 11 и ниже.

Этот метод включает создание нокаутирующего текста с жестким градиентом остановки. Разметка состоит из одного HTML элемента a для создания гиперссылки:

Мы можем начать добавлять стили к гиперссылке. Использование overflow: hidden обрезает любой контент за пределами гиперссылки во время перехода при наведении:

Нам нужно будет использовать линейный градиент с жесткой остановкой на 50% от начального цвета, которым мы хотим, чтобы была ссылка, а также от цвета, на который она изменится:

Давайте использовать background-clip , чтобы обрезать градиент и значение text для отображения текста. Мы также будем использовать свойства background-size и background-position :

Наконец, давайте добавим свойство transition псевдоклассу :hover у ссылки. Чтобы ссылка заполнялась слева направо при наведении, используйте свойство background-position :

a < /* Same as before */ transition: background-position 275ms ease; >a:hover

Несмотря на то, что эта техника обеспечивает эффект наведения, Safari и Chrome будут обрезать текстовые декорации и тени, то есть они не будут отображаться. Применение стилей текста, таких как подчеркивание, со свойством CSS text-decoration не будет работать.

Техника 2: Использование ширины / высоты

Это работает с использованием data атрибута, содержащего тот же текст, что и тег a , и установки width (заполнение текста слева направо или справа налево) или height (заполнение текста сверху вниз или снизу вверх), от 0% до 100% при наведении.

CSS похож на предыдущую технику минус свойства CSS фона. Свойство text-decoration будет работать здесь:

Это когда нам нужно использовать контент из атрибута data-content . Он будет расположен над содержимым в теге a . Мы используем небольшой прием для копирования текста в атрибуте data и отображения его через функцию attr() в свойстве content псевдоэлемента ::before .

a::before < position: absolute; content: attr(data-content); /* Prints the value of the attribute */ top: 0; left: 0; color: midnightblue; text-decoration: underline; overflow: hidden; transition: width 275ms ease; >

Чтобы текст не переносился на следующую строку, будет применяться white-space: nowrap . Чтобы изменить цвет заливки ссылки, задайте значение для свойства CSS color , используя псевдоэлемент ::before и width начинающийся с 0:

a::before < /* Same as before */ width: 0; white-space: nowrap; >

Увеличьте ширину псевдоэлемента ::before до 100%, чтобы завершить эффект текста при наведении:

a:hover::before

Использование CSS свойства text-decoration может позволить различным стилям подчеркивания появляться при переходе CSS:

Техника 3: Использование clip-path

Для этой техники мы будем использовать CSS свойство clip-path с многоугольной формой. Многоугольник будет иметь четыре вершины, две из которых будут расширяться вправо при наведении:

Разметка такая же, как и в предыдущем методе. Мы снова будем использовать псевдоэлемент ::before , но CSS будет другим:

a::before

В отличие от предыдущих методов, text-decoration: underline должен быть объявлен псевдоэлементу ::before для заполнения подчеркивания при наведении курсора.

Теперь давайте рассмотрим CSS для техники clip-path :

clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

Вершины полигона свойства clip-path устанавливаются в процентах, чтобы определить координаты в следующем порядке:

0 0 = вверху слева
0 0 = вверху справа
100% 0 = внизу справа
0 100% = внизу слева

Направление эффекта заполнения можно изменить, изменив координаты. Теперь, когда у нас есть представление о координатах, мы можем заставить многоугольник расширяться вправо при наведении:

a:hover::before

Этот метод работает довольно хорошо, но обратите внимание, что поддержка свойства clip-path варьируется в зависимости от браузера. Создание CSS-перехода с помощью clip-path — лучшая альтернатива, чем использование метода width / height .

Техника 4: Использование преобразования

Разметка для этого метода использует метод маскировки с элементом span . Поскольку мы будем использовать дублированный контент в отдельном элементе, мы будем использовать aria-hidden=»true» для улучшения доступности — это скроет его от программ чтения с экрана, чтобы контент не читался дважды:

CSS для элемента span содержит переход, который будет начинаться слева:

span

Далее нам нужно заставить скользить span вправо вот так:

Для этого мы будем использовать CSS функцию translateX() и установим ее в 0:

a:hover span

Затем мы будем использовать псевдоэлемент ::before для span , снова используя атрибут data-content , который мы делали ранее. Мы установим позицию, переместив ее на 100% вдоль оси x.

span::before

Как и для элемента span , положение псевдоэлемента ::before также будет установлено на translateX(0) :

a:hover span::before

Несмотря на то, что этот метод является наиболее совместимым с кросс-браузерными технологиями, для его получения требуется больше разметки и CSS. Тем не менее, использование CSS-свойства transform очень полезно для производительности, поскольку не вызывает перерисовок и, следовательно, обеспечивает плавные переходы CSS со скоростью 60 кадров в секунду.

В заключение!

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