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

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

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

Давайте начнем!

Метод 1: Использование фонового клипа: текст

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

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

   Link Hover   

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

  a {
  положение: относительное;
  дисплей: встроенный блок;
  размер шрифта: 2em;
  вес шрифта: 800;
  цвет: королевский синий;
  переполнение: скрытое;
}  

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

  a {
  / * То же, что и раньше * /
  фон: линейный градиент (справа, темно-синий, полуночно 50%, королевский синий 50%);
}  

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

  a {
  / * То же, что и раньше * /
  фон-клип: текст;
  -webkit-background-clip: текст;
  -webkit-text-fill-color: прозрачный;
  размер фона: 200% 100%;
  background-position: 100%;
}  

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

  a {
  / * То же, что и раньше * /
  переход: фоновая позиция 275 мс легкость;
}
a: hover {
  background-position: 0 100%;
}  

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

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

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

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

   Link Hover   

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

  a {
  положение: относительное;
  дисплей: встроенный блок;
  размер шрифта: 2em;
  цвет: королевский синий;
  вес шрифта: 800;
  текстовое оформление: подчеркивание;
  переполнение: скрытое;
}  

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

  a :: before {
  положение: абсолютное;
  content: attr (data-content); / * Печатает значение атрибута * /
  верх: 0;
  слева: 0;
  цвет: темно-синий;
  текстовое оформление: подчеркивание;
  переполнение: скрытое;
  переход: ширина 275 мс легкость;
}  

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

  a :: before {
  / * То же, что и раньше * /
  ширина: 0;
  пустое пространство: nowrap;
}  

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

  a: hover :: before {
  ширина: 100%;
}  

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

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

Техника 3: Использование пути клипа

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

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

  a :: before {
  положение: абсолютное;
  content: attr (data-content);
  цвет: темно-синий;
  текстовое оформление: подчеркивание;
  клип-путь: многоугольник (0 0, 0 0, 0% 100%, 0 100%);
  переход: клип-путь 275 мс легкость;
}  

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

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

  clip-path: многоугольник (0 0, 0 0, 0% 100%, 0 100%);  

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

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

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

  a: hover :: before {
  путь обрезки: многоугольник (0 0, 100% 0, 100% 100%, 0 100%);
}  

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

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

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

     Link Hover   

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

  span {
  положение: абсолютное;
  верх: 0;
  слева: 0;
  переполнение: скрытое;
  transform: translateX (-100%);
  переход: преобразование 275 мс легкость;
}  

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

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

  a: интервал при наведении {
transform: translateX (0);
}  

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

  span :: before {
  дисплей: встроенный блок;
content: attr (data-content);
цвет: темно-синий;
transform: translateX (100%);
переход: преобразование 275 мс легкость;
текстовое оформление: подчеркивание;
}  

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

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

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

Вот оно!

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