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

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

Создание эффектов наведения ссылок 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);
}

Остальное - все предпочтения! Мы добавим transitiontransform эффекты, некоторые цвета и еще много чего, чтобы получить полный эффект. Эти значения полностью зависят от вас.

ДЕМО

Наведите на ссылку


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

ДЕМО

Наведите на эту ссылку


На этом всё.

Удачных вам ссылок!

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

Анимационные указатели прокрутки страницы
Анимационные указатели прокрутки страницы
Такие указатели чаще всего применяют на первом экране Главной страницы сайта, когда на ней размещена полноэкранная картинка, видео или слайдер. Чтобы показать Пользователю, что основной контент расположен ниже, в нижней части экрана размещают стрелку, направленную вниз. Чтобы привлечь к ней дополнительное внимание, её делаю анимационный...

Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров
Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров
Подборка различных проектов с открытым кодом на CSS и HTML, от бордеров до слайдера, которые могут вам пригодиться при создании веб сайта.

Анимация для текста на CSS
Анимация для текста на CSS
В наше время без анимационных эффектов на сайте просто не обойтись. Это и слайдеры и скроллеры, различного рода реагирования элементов дизайна при наведении на них мышкой, это анимация при прокрутке страниц и различные выезжающие, выплывающие, выползающие и т.д. блоки контента. Дизайнеры используют свою фантазию на 100%, чтобы их дсайт выделился из общей массы и запомнился Пользователям...

CSS анимация обводки блоков
CSS анимация обводки блоков
Интересные эффекты для границ блоков контента с анимацией, которые вам могут пригодиться при оформлении страниц сайта.

Бесплатный ФРОНТЭНД
Бесплатный ФРОНТЭНД
Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...

Фоновая волна на простом CSS
Фоновая волна на простом CSS
Рассмотрим в этой статье, как сделать фоновые волны на сайте, используя только возможности CSS3 и SVG файл. Т.е. без применения Javascript.