4 способа анимировать цвет текстовой ссылки при наведении
Давайте создадим чистый CSS-эффект, который меняет цвет текстовой ссылки при наведении… но вставьте этот новый цвет вместо простой замены цветов.
Для этого мы можем использовать четыре различных метода. Давайте посмотрим на них, помня о важных вещах, таких как доступность, производительность и поддержка браузера.
Давайте начнем!
Техника 1: Использование background-clip: text
На момент написания статьи background-clip: text это экспериментальная функция, которая не поддерживается в Internet Explorer 11 и ниже.
Этот метод включает создание нокаутирующего текста с жестким градиентом остановки. Разметка состоит из одного HTML элемента 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%;
}
Наконец, давайте добавим свойство transition псевдоклассу :hover у ссылки. Чтобы ссылка заполнялась слева направо при наведении, используйте свойство background-position:
a {
/* Same as before */
transition: background-position 275ms ease;
}
a:hover {
background-position: 0 100%;
}
Несмотря на то, что эта техника обеспечивает эффект наведения, Safari и Chrome будут обрезать текстовые декорации и тени, то есть они не будут отображаться. Применение стилей текста, таких как подчеркивание, со свойством CSS text-decoration не будет работать.
Техника 2: Использование ширины / высоты
Это работает с использованием data атрибута, содержащего тот же текст, что и тег a, и установки width (заполнение текста слева направо или справа налево) или height (заполнение текста сверху вниз или снизу вверх), от 0% до 100% при наведении.
Вот разметка:
CSS похож на предыдущую технику минус свойства CSS фона. Свойство text-decoration будет работать здесь:
a {
position: relative;
display: inline-block;
font-size: 2em;
color: royalblue;
font-weight: 800;
text-decoration: underline;
overflow: hidden;
}
Это когда нам нужно использовать контент из атрибута 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 {
width: 100%;
}
Использование CSS свойства text-decoration может позволить различным стилям подчеркивания появляться при переходе CSS:
Техника 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 устанавливаются в процентах, чтобы определить координаты в следующем порядке:
0 0= вверху слева0 0= вверху справа100% 0= внизу справа0 100%= внизу слева
Направление эффекта заполнения можно изменить, изменив координаты. Теперь, когда у нас есть представление о координатах, мы можем заставить многоугольник расширяться вправо при наведении:
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" для улучшения доступности - это скроет его от программ чтения с экрана, чтобы контент не читался дважды:
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);
}
Затем мы будем использовать псевдоэлемент ::before для span, снова используя атрибут 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 кадров в секунду.
В заключение!
Мы только что рассмотрели четыре различных метода для достижения одинакового эффекта. Хотя у каждого есть свои плюсы и минусы, вы можете заметить, что можно полностью изменить цвет текста. Это аккуратный небольшой эффект, который делает ссылки более интерактивными.
