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

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

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

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

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

Этот метод включает создание убирающегося текста с резким переходом градиента. Разметка состоит из одного HTML-элемента ссылки (<a>) для создания гиперссылки:

<a href="#">Link Hover</a>

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

a { position: relative; display: inline-block; font-size: 2em; font-weight: 800; color: royalblue; overflow: hidden;
}

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

a { /* Same as before */ background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

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

a { /* Same as before */ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%;
}

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

a { /* Same as before */ transition: background-position 275ms ease;
}
a:hover { background-position: 0 100%;
}

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

Техника 2: Использование width/height

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

Вот разметка:

<a href="#" data-content="Link Hover">Link Hover</a>

CSS похож на тот, что мы использовали в предыдущей технике, минус свойства CSS background. Здесь будет использоваться свойство text-decoration:

a { position: relative; display: inline-block; font-size: 2em; color: royalblue; font-weight: 800; text-decoration: underline; overflow: hidden;
}

Теперь нам нужно использовать контент из атрибута data-content. Он будет расположен над содержимым в теге <a>. Мы используем небольшую хитрость: копируем текст в атрибуте данных и отображаем его через функцию 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 { width: 100%;
}

Хотя в этом методе используется трюк, свойства width или height не дают производительный переход CSS. Лучше всего использовать для достижения плавного перехода либо свойство transform, либо opacity со скоростью 60 кадров в секунду.

Использование свойства CSS text-decoration может позволить отображать различные стили подчеркивания при переходе. Я создал иллюстрирующую это демонстрацию, используя следующую технику: свойство CSS clip-path.

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

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

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

a::before { position: absolute; content: attr(data-content); color: midnightblue; text-decoration: underline; clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%); transition: clip-path 275ms ease;
}

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

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

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

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

a:hover::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

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

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

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

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

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

span { position: absolute; top: 0; left: 0; overflow: hidden; transform: translateX(-100%); transition: transform 275ms ease;
}

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

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

a:hover span { transform: translateX(0);
}

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

span::before { display: inline-block; content: attr(data-content); color: midnightblue; transform: translateX(100%); transition: transform 275ms ease; text-decoration: underline;
}

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

a:hover span::before { transform: translateX(0);
}

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

Мы это сделали!

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

Автор: Katherine Kato

Источник: https://css-tricks.com

Редакция: Команда webformyself.