Красивый эффект при наведении (:before и :after)
На этом уроке мы сделаем меню с красивым эффектом при наведении с использованием псевдоэлементов - :after и :before. Что такое псевдоэлементы, мы очень подробно разбирали здесь.
В итоге мы должны получить следующее:
Сделаем HTML заготовку из простого списка с ссылками внутри.
<ul>
<li><a href="#">Квартиры</a></li>
<li><a href="#">Дома</a></li>
<li><a href="#">Дачи</a></li>
<li><a href="#">Участки</a></li>
<li><a href="#">Гаражи</a></li>
</ul>
По умолчанию меню прижато к верхнему левому углу окна браузера. В файле стилей спозиционируем от этого угла на 20% от верхнего края и на 30% от левого края окна браузера, уберем маркеры и отобразим пункты меню горизонтально.
ul {
position: absolute;
top: 20%;
left: 30%;
list-style: none;
display: flex;
}
На данном этапе пункты меню прижаты друг к другу, надо между ними создать пространство.
Делается это с помощью свойства padding и margin с неким числовым значением, которые не работает у строчных элементов, таких как гиперссылка. Поэтому пункты меню должны стать блочными и тогда можно применять к ним padding и margin. Эффект при наведении должен происходить плавно, пропишем свойство transition с задержкой в полсекунды.
ul li a {
display: block;
padding: 10px 20px;
margin: 20px 0; /* Отступы для псевдоэлемента сверху и снизу от меню */
transition: .5s;
position: relative;
}
Заготовка в виде меню для демонстрации эффекта неведения, готова. А теперь приступим к самому эффекту. Пока наше меню выглядит так:
А, чтобы оно было как на картинке, с двумя линиями, которые будут появляться при наведении
посмотрим на код ниже.
ul li a:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 1px solid #44c09d;
border-bottom: 1px solid #44c09d;
transform: scaleY(2);
transition: .5s;
}
Почему мы не можем просто нарисовать эти линии в HTML-разметке, а затем их спрятать? Думаю, что неопытный верстальщик так и сделал бы. Но мы будем учиться все делать правильно. Зачем загромождать HTML-страницу лишним кодом, когда существует псевдоэлемент before? До меню (before), мы получили две линии, за счет однопиксельных бордюров и для жирности увеличили их в 2 раза.
Теперь спрячем эти линии, сделав их прозрачными, чтобы при наведении они плавно появлялись.
ul li a:before {
opacity: 0;
}
Получается, что мы прописываем стили для псевдокласса hover псевдоэлемента before, звучит забавно.
ul li a:hover:before {
transform: scaleY(1.2); /* Масштабирование уменьшение */
opacity: 1;
}
Теперь копируем код с before и меняем это слово на after. Убираем из кода свойство opacity, меняем значение у transform и прописываем background.
ul li a:after {
transition: .5s; /* Плавный переход */
background: #44c09d;
}
ul li a:hover:after {
transform: scale(1);
}
Теперь при наведении на пункты меню, появляются прямоугольники того же цвета, все сливается. Пропишем цвет у пунктов меню - белым при hover эффекте.
ul li a:hover {
color: #fff;
}
И добавим к обоим псевдоэлементам before и after порядок наложения слоев, чтобы этот слой был ниже слоя с hover псевдоклассом и тогда эффект будет виден.
z-index: -1;
Посмотреть, как работает этот эффект при наведении, вы можете на
демо странице.Код hover эффекта целиком:
Для тех, кто только начал изучать HTML5 и CSS3, будет полезным пройти мой видеокурс.
-
Создано 25.05.2018 10:04:29
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.