Скрипт анимированного меню для uCoz в 3D на CSS





Такой скрипт анимированного меню для uCoz в 3D на CSS горизонтального вида можно устанавливать практически на любой сайт и там данное горизонтальное меню uCoz будет смотреться привлекательно. Очень неповторимо смотрится эффект3D, который одновременно и аккуратный и в то же время своеобразный, что делает данное горизонтальное меню неповторимым и своеобразным

Установка:
- этот код пихаем в CSS:

Code
/* Основные стили меню */  
  .block-menu {  
  display: block;  
  background: #000;  
  }  

  .block-menu li {  
  display: inline-block;  
  }  

  .block-menu li a {  
  color: #fff;  
  display: block;  
  text-decoration: none;  
  font-family: 'Passion One', Arial, sans-serif;  
  font-smoothing: antialiased;  
  text-transform: uppercase;  
  overflow: visible;  
  line-height: 20px;  
  font-size: 24px;  
  padding: 15px 10px;  
  }  

  /* Анимация */  
  .three-d {  
  perspective: 200px;  
  transition: all .07s linear;  
  position: relative;  
  cursor: pointer;  
  }  
  /* Завершение анимации! */  
  .three-d:hover .three-d-box,  
  .three-d:focus .three-d-box {  
  transform: translateZ(-25px) rotateX(90deg);  
  }  

  .three-d-box {  
  transition: all .3s ease-out;  
  transform: translatez(-25px);  
  transform-style: preserve-3d;  
  pointer-events: none;  
  position: absolute;  
  top: 0;  
  left: 0;  
  display: block;  
  width: 100%;  
  height: 100%;  
  }  

  /*  
  Помещаем элементы "front" и "back" на место с помощью трансформаций CSS  
  */  
  .front {  
  transform: rotatex(0deg) translatez(25px);  
  }  

  .back {  
  transform: rotatex(-90deg) translatez(25px);  
  color: #ffe7c4;  
  }  

  .front, .back {  
  display: block;  
  width: 100%;  
  height: 100%;  
  position: absolute;  
  top: 0;  
  left: 0;  
  background: black;  
  padding: 15px 10px;  
  color: white;  
  pointer-events: none;  
  box-sizing: border-box;  
  }


- этот код пихаем в html, в то место где хотим видеть горизонтальное 3D меню на CSS:

Code
<ul class="block-menu">  
  <li><a href="/" class="three-d">  
  Главная  
  <span aria-hidden="true" class="three-d-box">  
  <span class="front">Главная</span>  
  <span class="back">Кто мы</span>  
  </span>  
  </a></li>  
  <li><a href="/demos" class="three-d">  
  Демо  
  <span aria-hidden="true" class="three-d-box">  
  <span class="front">Демо</span>  
  <span class="back">Ух ты!</span>  
  </span>  
  </a></li>  
  <!-- другие пункты меню -->  
  </ul>



Категория: Статистика и счетчики | Добавил: GaV | Теги: 3Д меню для ucoz, Скрипт анимированного меню для uCoz, новое анимированное меню для ucoz
Просмотров: 1101 | Загрузок: 237 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]