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

Меню сайта с красивой анимацией на CSS

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

HTML-списки - это ресурс широко используемый веб-дизайнерами и разработчиками, а также блогерами, но по правде говоря, по умолчанию они склонны к довольно недоеданию при разработке. В этом посте вы увидите один такой список на CSS, делая ему гораздо более современный вид. Преимущество всего этого заключается в том, что вы можете настроить эти стили и создать свои собственные списки с эффектами, о которых вы можете думать.

HTML

Код

<div class="songalen_zotsabtum">
  <ul>
  <li><a href="http://zornet.ru/load/142">ZorNet.Ru 1</a></li>
  <li><a href="http://zornet.ru">ZorNet.Ru 2</a></li>
  <li><a href="http://zornet.ru">ZorNet.Ru 3</a></li>
  <li><a href="#">ZorNet.Ru 4</a></li>
  <li><a href="#">ZorNet.Ru 5</a></li>
  <li><a href="#">ZorNet.Ru 6</a></li>
  <li><a href="#">ZorNet.Ru 7</a></li>
  </ul>
</div>

CSS

Код

.songalen_zotsabtum ul {
  list-style:none;
}

.songalen_zotsabtum ul li {
  font-family:Georgia,serif,Times;
  font-size:17px;
}

.songalen_zotsabtum ul li a {
  display: block;
  width: 295px;
  height: 27px;
  background-color: #1f1c1c;
  border-left: 4.7px solid #252323;
  border-right: 4.5px solid #424040;
  padding-left: 10px;
  text-decoration: none;
  color: #e5f2f9;
}

.songalen_zotsabtum ul li a:hover {
  transform: rotate(4deg);
  box-shadow: 9px 9px 18px #151414;
  margin-left: 11px;
}

Как можно заметить, что также присутствуют стили, у кото алимента, на который наводишь клик.

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

17 Января 2018 Просмотров: 1692 Комментариев: (0)

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

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

Kosten

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