У вас включен AdBlock или иной блокировщик рекламы.

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

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

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%;
}

Наконец, давайте добавим свойство 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% при наведении.

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

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

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 устанавливаются в процентах, чтобы определить координаты в следующем порядке:

  1. 0 0 = вверху слева
  2. 0 0 = вверху справа
  3. 100% 0 = внизу справа
  4. 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" для улучшения доступности - это скроет его от программ чтения с экрана, чтобы контент не читался дважды:

<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);
}

Затем мы будем использовать псевдоэлемент ::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 кадров в секунду.

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

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

Источник:

#CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться