• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимированный значок Меню с чистым CSS (Меняющееся значок гамбургер меню при помощи CSS)
Анимированный значок Меню с чистым CSS
Kosten
Дата: Четверг, 2019-05-09, 01:40 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24666
Награды: 57


Не сложное руководство по созданию 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);
}

Демонстрация
Прикрепления: 3669288.png(23.0 Kb) · 3355506.png(18.0 Kb) · menu.zip(1.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимированный значок Меню с чистым CSS (Меняющееся значок гамбургер меню при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: