Анимация подчеркивания ссылок на CSS
Дефолтное подчеркивание ссылок
Дефолтное подчеркивание ссылок в HTML выглядит очень скучно и непривлекательно. Стандартные ссылки имеют синий цвет и нижнее подчеркивание, а на наведении мыши никак не реагируют. На этом уроке вы узнаете, как сделать подчеркивание ссылок более интерактивным.
<a href="#">Стандартная ссылка</a>
Убрать подчеркивание ссылки
Прежде чем сделать подчеркивание ссылок более креативным, нужно вообще убрать подчеркивание у ссылок. Добавим всего одно свойство text-decoration со значением none, которое по умолчанию имеет значение underline.
// CSS
a {
text-decoration: none;
}
Подчеркивание ссылок при наведении
Теперь сделаем простое подчеркивание ссылок при наведении мышью. Когда мы наводим мышь, ссылка мгновенно подчеркивается, но как только убираем, подчеркивание пропадает. Большинство ссылок в интернете, реализованы с помощью обычного hover-эффекта. Это тоже скучно, давайте сделаем процесс подчеркивания ссылок еще интереснее - с элементами анимации.
a:hover {
text-decoration: underline;
}
Анимация подчеркивания ссылок
Пусть наши ссылки будут подчеркиваться с левой и правой стороны, а также из центра. Создадим HTML-разметку для трех ссылок с разными классами и поместим их в родительский контейнер links.
// HTML
<div class="links">
<p class="left">
<a href="#">Подчеркивание слева</a>
</p>
<p class="center">
<a href="#">Подчеркивание по центру</a>
</p>
<p class="right">
<a href="#">Подчеркивание справа</a>
</p>
</div>
Общие CSS стили
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap");
body {
font-family: "Roboto Condensed", sans-serif;
font-weight: 300;
font-size: 24px;
}
.links {
margin: auto; /* автоматическое задание отступов */
width: 80%; /* ограничение по ширине родителя */
}
a {
text-decoration: none; /* ссылка без подчеркивания */
position: relative; /* относительное позиционирование */
color: darkred; /* цвет ссылок */
}
Далее напишем CSS стили для каждого класса отдельно. Фишка состоит в том, что мы будем анимировать не сами ссылки, а их псевдоэлементы before. Для классов left и right, мы нарисуем линии (нижнее подчеркивание) с нулевой шириной. При наведении на ссылку, линия примет ширину 100%, возникнет эффект плавного подчеркивания ссылки. Фокус с подчеркиванием ссылок заключается в изменении значения ширины линии с 0% до 100% .
Подчеркивание ссылки слева
.left a::before {
content: ""; /* отображает псевдоэлемент */
bottom: 0; /* позиция линии снизу */
right: 0; /* позиция линии справа */
position: absolute; /* абсолютное позиционирование */
width: 0%; /* ширина линии */
height: 4px; /* толщина линии */
background-color: darkred; /* цвет линии */
transition: 0.6s; /* плавный переход */
}
.left a:hover:before {
width: 100%; /* новая ширина линии */
left: 0; /* исчезновение линии слева */
}
Подчеркивание ссылки справа
.right a::before {
content: "";
bottom: 0;
right: 0;
position: absolute;
width: 0%;
height: 4px;
background-color: darkred;
transition: 0.6s;
}
.right a:hover:before {
width: 100%;
}
Подчеркивание ссылки по центру
Рисование линии подчеркивания из центра принципиально отличается от предыдущих двух вариантов. Сразу укажем ширину линии нижнего подчеркивания 100%. Свойство transform со значением scale уменьшит ширину элемента до 0, а при наведении увеличит ширину элемента до его изначального размера - значения ширины 100% по горизонтальной оси.
.center a::before {
content: "";
bottom: 0;
left: 0;
position: absolute;
width: 100%;
height: 4px;
background-color: darkred;
transition: 0.6s;
transform: scaleX(0);
}
.center a:hover:before {
transform: scaleX(1);
}
Посмотрите пример на CodePen
-
Создано 31.05.2021 10:26:27
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.