ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект скольжения при наведение на CSS

Эффект скольжения при наведение на CSS

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

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

Мы все любим переходы, но до них нужно выбрать, а также увидеть еще красивую анимацию. Эти переходы многих удивят, и кто-то вспомнит, где на некоторых сайтах он их встречал, но теперь может установить на своем сайте. Это действительно красиво смотрится, что демонстрирует анимацию поверх привлекательной мультипликационной графики.

Установка:

HTML

Код

<div class="caxasegnu-klasecubom">
  <ul>
  <li><a href="">Zornet.ru</a></li>
  <li><a href="">Скрипты</a></li>
  <li><a href="">Шаблоны</a></li>
  <li><a href="">Контакты</a></li>
  <div class="kigasubed"></div>
  </ul>
</div>

CSS

Код

.caxasegnu-klasecubom {
  position: relative;
  overflow: hidden;
  width: 587px;
  height: 45px;
  line-height: 45px;
  margin: 35px auto;
  border-radius: 8px;
  background: #0d4a7b;
}
.caxasegnu-klasecubom ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 0;
}
.caxasegnu-klasecubom ul li {
display: inline-block;
width: 25%;
box-sizing: border-box;
font-size:18px;
}
.caxasegnu-klasecubom ul li a {
  color: #f7f6f6;
  text-decoration: none;
}
.kigasubed {
position: absolute;
bottom: 2px;
left: -12.5%;
width: 12.5%;
height: 4px;
background: white;
transition: 0.5s ease-in-out;
}
.caxasegnu-klasecubom ul li:nth-child(1):hover ~ .kigasubed {
left: 6.25%;
}
.caxasegnu-klasecubom ul li:nth-child(2):hover ~ .kigasubed {
left: 31.25%;
}
.caxasegnu-klasecubom ul li:nth-child(3):hover ~ .kigasubed {
left: 56.25%;
}
.caxasegnu-klasecubom ul li:nth-child(4):hover ~ .kigasubed {
left: 81.5%;
}

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

Если ранее все зависело от знаков, это нужно было написать ключевые слова так, чтоб полоса была по центру, что все автоматически установлено.

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

23 Мая 2019 Загрузок: 1 Просмотров: 1229 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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