Скрипт анимированного меню для 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>