Не сложное руководство по созданию CSS-гамбургера, который называют значок для навигаций или меню, что будет анимированный при наведении клика на его, здесь не нужно нажимать, чтоб увидеть, что вы правильно навели. Все очень просто, мы видим значок, который закреплен к навигациям или скрываемому блоку, то наводим на его и он прокручивается, что можно задействовать, а точнее преобразовать значение в действие
В наши дни дизайнеры много экспериментируют с анимацией, чтобы придать своим конструкциям крутые эффекты, и также оригинальность на сайте еще не отменял, нужно так сделать, чтоб реально заинтересовало.
В веб-дизайне анимация определенных событий создает намного лучшее взаимодействие с пользователем, который в последствие оценит, и если говорить про этот значок, то безусловно он отличается от других, также исполнение ее на чистом CSS, даем ему плюс.
Это по умолчанию:
Здесь при наведение клика:
HTML
Код
<div class="gsazaxet_ulopedas">
<div></div>
</div>
CSS
Код
.gsazaxet_ulopedas {
margin: 1em;
width: 40px;
cursor:pointer;
}
.gsazaxet_ulopedas:after,
.gsazaxet_ulopedas:before,
.gsazaxet_ulopedas div {
background-color: #fff;
border-radius: 3px;
content: '';
display: block;
height: 5px;
margin: 7px 0;
transition: all .2s ease-in-out;
}
.gsazaxet_ulopedas:hover:before {
transform: translateY(12px) rotate(135deg);
}
.gsazaxet_ulopedas:hover:after {
transform: translateY(-12px) rotate(-135deg);
}
.gsazaxet_ulopedas:hover div {
transform: scale(0);
}
Демонстрация
