Для того чтобы это сделать, можно прибегнуть к одному из четырёх методов, описанных в этом материале. Рассмотрим эти методы, обращая особое внимание на разные важные вещи вроде доступности контента, производительности решения и браузерной поддержки.
Метод №1: использование background-clip: text
Во время написания этого материала свойство background-clip: text носит статус экспериментального. Оно не поддерживается в Internet Explorer 11 и ниже.Этот метод предусматривает создание так называемого «knockout text» (текста, который выглядит так, будто он вырезан в некоей поверхности и из него просвечивает фон) с резким градиентом. 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 { /* То же, что и раньше */ background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%); } Воспользуемся свойством background-clip для обрезки градиента. Дадим ему значение text для вывода текста. Мы ещё будем использовать свойства background-size и background-position. Делается это для вывода начального цвета.
a { /* То же, что и раньше */ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; } И наконец — добавим к стилю CSS-свойство transition и стилизуем псевдокласс гиперссылки :hover. Для того чтобы при наведении на ссылку мыши новый цвет заполнял бы ссылку слева направо, воспользуемся свойством background-position.
a { /* То же, что и раньше */ transition: background-position 275ms ease; } a:hover { background-position: 0 100%; } Вот — пример на CodePen.Хотя эта методика и позволяет достичь желаемого эффекта, Safari и Chrome подвергнут обрезке элементы оформления текста и тени. Это значит, что они показаны не будут. Применение текстовых стилей, таких, как подчёркивание текста с помощью CSS-свойства text-decoration, работать не будет. Поэтому, если нужно, чтобы ссылки были бы подчёркнутыми, стоит рассмотреть другие способы настройки подчёркивания.
Метод №2: применение width/height
Этот метод основан на использовании атрибута data-*, содержащего тот же текст, что и тег <a>. Здесь используется управление свойством width (для заполнения ссылки цветом слева направо или справа налево) или свойством height (для применения эффекта сверху вниз или снизу вверх). Например, в нашем случае применяется воздействие на свойство width, которое, при наведении мыши на ссылку, меняется с 0 до 100%.Вот разметка:
<a href="#" data-content="Link Hover">Link Hover</a> 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>. Мы можем воспользоваться здесь интересным маленьким приёмом, который заключается в копировании текста из атрибута и в выводе его с помощью функции attr() в свойство content псевдоэлемента ссылки ::before.
a::before { position: absolute; content: attr(data-content); /* Выводит значение атрибута */ 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 { /* То же, что и раньше */ width: 0; white-space: nowrap; } Увеличим значение width псевдоэлемента ::before до 100% для применения эффекта при наведении на ссылку мыши:
a:hover::before { width: 100%; } Вот пример применения этого метода.Хотя мы, воздействуя на свойства элемента width и height, достигаем того, что нам нужно, этот метод отличается невысокой производительностью. Для того чтобы получить плавную смену цветов на 60 кадрах в секунду — лучше пользоваться свойствами transform или opacity.Применение свойства text-decoration позволяет использовать в анимированных ссылках различные стили подчёркивания текста. Вот пример, демонстрирующий это, созданный с помощью третьей методики, которую мы сейчас рассмотрим. Она основана на применении CSS-свойства clip-path.
Метод №3: применение clip-path
Здесь мы будем пользоваться CSS-свойством clip-path и многоугольником, в данном случае — прямоугольником. Прямоугольник имеет четыре угла, длина двух из его сторон увеличивается при наведении мыши на ссылку. Фигура расширяется, одна из её сторон двигается слева направо.
Тут используется та же разметка, что и в предыдущем примере:
<a href="#" data-content="Link Hover">Link Hover</a> Мы, снова, будем пользоваться псевдоэлементом ::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= верхний правый угол0 100%= нижний правый угол0 100%= нижний левый угол
Направление применения эффекта заполнения можно изменить, модифицировав координаты. Теперь, когда мы знаем о координатах, мы можем сделать так, чтобы фигура росла бы, двигаясь слева направо при наведении на ссылку мыши:
a:hover::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } Вот рабочий вариант этого примера.Эта методика анимирования цвета ссылок работает очень хорошо, но перед её применением стоит учесть поддержку свойства clip-path различными браузерами. Создание CSS-переходов с использованием clip-path — это лучше, чем использование методики height/width. Однако её применение приводит к тому, что браузер выполняет весьма ресурсозатратные операции Paint (рисование).
Метод №4: использование transform
В разметке, которая здесь применяется, используется методика маскировки с помощью элемента <span>. Так как мы будем использовать в элементе <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> вправо, выглядящее так, как показано ниже.
Для того чтобы это сделать, воспользуемся псевдоэлементом ::before элемента <span>. И, как прежде, прибегнем к использованию атрибута data-content. Зададим изменение позиции элемента, применяя трансформацию transform: translateX(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 будет установлена с помощью конструкции transform: translateX(0):
a:hover span::before { transform: translateX(0); } Вот этот пример на CodePen.Хотя этот метод отличается наилучшей кросс-браузерной поддержкой из рассмотренных, для его реализации нужно больше HTML и CSS-кода. Тем не менее, применение CSS-свойства transform не вредит производительности, его использование не вызывает перерисовывания элементов, и, в результате, ведёт к формированию плавных CSS-переходов на 60 кадрах в секунду.
Итоги
Только что мы рассмотрели четыре разных метода, позволяющих достичь одного и того же эффекта средствами CSS. Хотя у каждого из них есть свои плюсы и минусы, можно заметить, что нет ничего невозможного в том, чтобы организовать анимацию цвета текста ссылок при наведении на них мыши. Это — небольшой приятный эффект, применение которого приводит к тому, что ссылки воспринимаются более интерактивными.
Уважаемые читатели! Анимируете ли вы ссылки в своих проектах?
ссылка на оригинал статьи https://habr.com/ru/company/ruvds/blog/491702/
Добавить комментарий