Анимированные ссылки


Создание эффектов наведения ссылок CSS может добавить немного изюминки на скучную веб-страницу. Если вы когда-либо оказывались в тупике, пытаясь создать эффект плавного наведения, у меня есть шесть CSS-эффектов, которые вы можете взять и использовать для своего следующего проекта.
1. Эффект наведения на ссылку скользящей подсветкой
Этот эффект накладывает тень прямоугольника на встроенную ссылку, изменяя цвет текста ссылки в процессе. Мы начинаем с отступов вокруг ссылки, затем добавляем отрицательное поле с тем же значением, чтобы отступы не нарушали текстовый поток.
Мы будем использовать box-shadow
вместо свойства background, поскольку оно позволяет нам переходить.
HTML
<a href="#">Наведите на ссылку</a>
a {
box-shadow:
inset 0 0 0 0 #54b3d6;
color: #54b3d6;
margin: 0 -.25rem;
padding: 0 .25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
box-shadow: inset 100px 0 0 0 #54b3d6;
color: white;
}
ДЕМО
Наведите на ссылку
2. Эффект наведения на текстовую ссылку
Вот забавный вариант, в котором мы меняем текст ссылки на какой-либо другой текст при наведении курсора мыши. Наведите курсор на текст, и связанный текст выскользнет, когда появится новый текст.
Легче показать, чем рассказать.
В этом эффекте наведения ссылок происходит довольно много хитрости. Но волшебный соус использует атрибут данных для определения текста, который вставляется, и вызывает его со content
свойством ::after
псевдоэлемента ссылки.
Во-первых, разметка HTML:
<p>Hover <a href="#" data-replace="get a link"><span>get a link</span></a></p>
Это много встроенной разметки, но вы смотрите на тег абзаца, который содержит ссылку и интервал.
Давайте дадим ссылке несколько базовых стилей. Нам нужно придать ему относительное расположение, чтобы удерживать псевдоэлементы, которые будут расположены абсолютно, на месте, убедитесь, что они отображаются так inline-block
, чтобы получить возможности оформления элементов блока, и скрыть любое переполнение, которое могут вызвать псевдоэлементы.
a {
overflow: hidden;
position: relative;
display: inline-block;
}
Псевдоэлементы ::before
и ::after
должны иметь некоторое абсолютное расположение, чтобы они складывались с фактической ссылкой. Мы убедимся, что они установлены на всю ширину ссылки со смещением нуля в левую позицию, настраивая их для некоторого скользящего действия.
a::before, a::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
::after
Псевдоэлемент получает содержимое из атрибута данных ссылки, который находится в разметке HTML:
a::after {
content: attr(data-replace);
}
Теперь мы можем transform: translate3d()
::after
переместить элемент псевдо-элемента вправо на 200%. Мы возвращаем его в положение вкл :hover
. Пока мы этим занимаемся, мы можем придать этому нулевое смещение в top
направлении. Это будет важно позже, когда мы будем использовать ::before
псевдоэлемент как подчеркивание под текстом.
a::after {
content: attr(data-replace);
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
}
a:hover::after, a:focus::after {
transform: translate3d(0, 0, 0);
}
Мы также перейдем к transform: scale()
::before
псевдоэлементу, чтобы он был скрыт по умолчанию, а затем снова увеличим его масштаб :hover
. Мы сделаем его маленьким, например 2px
, по высоте, и прикрепим его bottom
так, чтобы он выглядел как подчеркивание в тексте, который заменяется на ::after
.
a::before {
background-color: #54b3d6;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
}
a:hover::before, a:focus::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
Остальное - все предпочтения! Мы добавим transition
transform
эффекты, некоторые цвета и еще много чего, чтобы получить полный эффект. Эти значения полностью зависят от вас.
ДЕМО
Наведите на ссылку
3. Эффект растущего фона на ссылке
Это довольно популярный эффект, который я видел используемым во многих местах. Идея заключается в том, что вы используете ::before
псевдоэлемент ссылки в качестве жирного подчеркивания, которое находится немного позади фактического текста ссылки. Затем при наведении псевдо-элемент расширяется, чтобы охватить все целиком.
Хорошо, несколько базовых стилей для ссылки. Мы хотим, чтобы notext-decoration
, поскольку ::before
будет действовать как один, тогда некоторое относительное позиционирование сохранится ::before
, когда мы зададим это абсолютное позиционирование.
HTML
<p>Hover this <a href="#">cool</a> link.</p>
a {
text-decoration: none;
position: relative;
}
Теперь давайте настроим ::before его, сделав его чем-то вроде 8pxвысокого, чтобы он выглядел как жирное подчеркивание. Мы также зададим ему абсолютное позиционирование, чтобы у нас был контроль, чтобы сделать его на всю ширину фактической ссылки, смещая ее так, чтобы она была на уровне left и находилась чуть дальше bottom, чтобы казалось, что она слегка выделяет ссылку. Можно также дать это z-index: -1, чтобы мы были уверены, что оно находится за ссылкой.
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
}
Красиво, красиво. Давайте сделаем так, чтобы при наведении курсора казалось, что ::before
ссылка увеличивается. Все, что нам нужно, это изменить высоту с 3px
на 100%
. Обратите внимание, что я также уменьшаю bottom
смещение до нуля, чтобы фон занимал больше места, когда он увеличивается.
a:hover::before {
bottom: 0; height: 100%;
}
Теперь для небольшого перехода к этим изменениям:
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0; bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
ДЕМО
Наведите на эту классную ссылку
4. Эффект с изменением цвета справа налево
Лично нам нравится использовать этот эффект для ссылок в навигации. Ссылка начинается одним цветом без подчеркивания. Затем, при наведении курсора, справа появляется новый цвет, а слева - подчеркивание.
Там происходит много движения, поэтому вы можете рассмотреть последствия доступности и обернуть все это в prefers-reduced-motion
запрос, чтобы заменить его чем-то более тонким для тех, кто чувствителен к движению.
Вот как это работает. Мы придаем ссылке линейный градиент фона с жесткой остановкой между двумя цветами на полпути.
HTML
<a href="">Hover This Link</a>
a {
background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
}
Мы делаем фон вдвое больше ширины ссылки или 200%
и размещаем его полностью слева. Таким образом, как будто отображается только один из градиентов двух цветов.
a {
background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
background-size: 200% 100%;
background-position: -100%;
}
Волшебство происходит, когда мы достигаем пары нестандартных -webkit-
свойств с префиксами. Один из них удаляет цвет из текста, чтобы сделать его прозрачным. Другой обрезает градиент фона к тексту, так что кажется, что текст на самом деле является цветом фона.
a {
background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Теперь давайте сделаем искусственное подчеркивание ссылки ::before
, применив его. Мы придадим ему тот же цвет, что и скрытой части градиента фона ссылки, и разместим его под фактической ссылкой, чтобы она выглядела как правильная text-decoration: underline
.
a:before {
content: '';
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px; left: 0;
width: 0;
height: 3px;
}
При наведении мы перемещаемся ::before
на место, заходя слева:
a:hover {
background-position: 0;
}
Теперь это немного сложнее. При наведении мы делаем ::before
псевдоэлемент ссылки 100% от ширины ссылки. Если бы мы применили это непосредственно к наведению ссылки, мы бы сделали саму ссылку во всю ширину, что перемещает ее по экрану. Ого!
a:hover::before { width: 100%; }
Добавьте небольшой переход, чтобы сгладить ситуацию:
a {
background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% );
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
}
ДЕМО
5. Эффект с подчеркиванием ссылок радужными цветами
Мы не можем сделать text-decoration-color: rainbow
, но мы можем подделать это с помощью небольшой background
магии, смешанной с линейными градиентами.
Сначала мы удаляем ссылки text-decoration
:
a { text-decoration: none; }
Теперь перейдем к этим градиентам. Мы объединяем два линейных градиента в одно background
свойство. Один градиент - это начальный цвет перед наведением. Вторая - радуга при наведении.
a {
background:
linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
}
Давайте сделаем размер фона небольшим 3px
, чтобы он выглядел, знаете, как подчеркивание. Мы можем совместить оба градиента в background-size
с войстве так, чтобы начальный градиент был полной ширины и 3px
высоты, а радуга - нулевой ширины.
a {
background:
linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
background-size: 100% 3px, 0 3px;
}
Теперь мы можем расположить фоновые градиенты — одновременно в background-position
свойстве — так, чтобы первый градиент был полностью виден, а радуга была скрыта из виду. О, и давайте убедимся, что фон не повторяется, пока мы этим занимаемся.
a {
background:
linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
}
Давайте обновим background-size
при наведении, чтобы градиенты меняли значения:
a:hover { background-size: 0 3px, 100% 3px; }
И, наконец, небольшой переход при наведении:
a {
background:
linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) );
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat; transition:
background-size 400ms;
}
Вуаля!
ДЕМО
6. Эффект с передвигающимся подчеркиванием
Данный пример убирает фон, делая ссылку более подчёркнутой.
a {
position: relative;
}
a::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: #18272F;
bottom: 0; left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
a:hover::before {
transform-origin: left;
transform: scaleX(1);
}
ДЕМО
На этом всё.