ZorNet.Ru — сайт для вебмастера » HTML и CSS » Классная анимация меню с эффектом на CSS

Классная анимация меню с эффектом на CSS

Здесь представлена классная анимация границы меню, где присутствует прекрасный эффект подчеркивание при наведении, где выполнено на чистом CSS. Если так получилось, что вы ищете вдохновляющие эффекты, а также анимацию, которая взаимодействует с навигацией сайта. То думаю вам нужно рассмотреть это предложение, чтоб как можно украсить свой портал и сделать его более оригинальным.

А точнее мы будем наблюдать оригинальный эффект, который идет на подчеркивание, где изначально многим покажется стандартным. Это появление строки с левой стороны, но когда клик будет убран, то появляется возражение, как было по умолчанию. Как можно заметить, что в данной статье основное внимание будет уделено красивой анимации или просто трюкам CSS, которые несложно задействовать в любом проекте без необходимости задействование в использования JavaScript.

Так по установке будут смотреться ключевые лова, что выстроены по умолчанию в горизонтальном положение.

Красивый эффект подчеркивание для адаптивного меню

Установка:

HTML

Код

<div class="navedas_kuleapis">
  <nav>
  <ul>
  <li><a class="manuxa" href="#">Главная</a></li>
  <li><a class="manuxa" href="#">Форум</a></li>
  <li><a class="manuxa" href="#">Разделы</a></li>
  <li><a class="manuxa" href="#">Контакты</a></li>
  </ul>
  </nav>
  </div>

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

CSS

Код

.navedas_kuleapis{
  display:table;
  height:100vh;
  width:100%;
}
nav{
  display:table-cell;
  vertical-align:middle;
  text-align: center;
}
ul{
  list-style: none;
  margin:0;
  padding:0;
}
li{
  display:inline-block;
  padding:0 10px;
}
.manuxa{
  position:relative;
  display:block;
  cursor: pointer;
  padding:8px 0px;
  text-decoration: none;
  color:#fff;
}
.manuxa:hover{
  color:#fff;
  text-decoration: none;
}
.manuxa:before,
.manuxa:after{
  content:'';
  position:absolute;
  width:0%;
  height:2px;
  bottom:-2px;
  background:#fff;
}
.manuxa:before{
  left:0;
}
.manuxa:after{
  right:0;
  background:#fff;
  transition:width 0.8s cubic-bezier(0.22,0.61,0.36,1);
}
.manuxa:hover:before{
  background:#fff;
  width:100%;
  transition:width 0.5s cubic-bezier(0.22,0.61,0.36,1);
}
.manuxa:hover:after{
  background: transparent;
  width:100%;
  transition:0s;
}

Здесь нужно взять на заметку, ведь многие эффекты используют функции CSS3, такие, как переходы, преобразования и анимации. И здесь у кого установлен старый браузер, то он просто корректно не покажет ту красоту, которая будет появляться.

Так как многие программы браузера не поддерживают эти функции, могут нуждаться в дополнительном внимании. Если возникнут какие-либо сомнения и вопросы, не стесняйтесь оставлять комментарии ниже.

Демонстрация

04 Ноября 2021 Загрузок: 3 Просмотров: 1014 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0