| Главная » Файлы » Скрипты плагины и дополнения » Разное |
Объемный индикатор загрузки для сайта
Идея состоит в том, что у нас будут блоки, на которых будут нанесены буквы, данные блоки будут двигаться волной, и немного вращаясь, что позволит создавать эффект объемности. Шаг 1. HTML Разметка будет простой, у нас будет два класса "preloader" и "preloader-box" первый из который будет определять общие правила, а второй определяет полностью разметку. Код <div class="preloader"> <div class="preloader-box"> <div>З</div> <div>А</div> <div>Г</div> <div>Р</div> <div>У</div> <div>З</div> <div>К</div> <div>А</div> </div> </div> Чтобы добавить новые буквы, Вам необходимо просто добавить новые блоки с включенными в них желаемой буквой. Каждый блок, это отдельный квадрат. Шаг 2. CSS Теперь нас необходим все параметры, с помощью которых у нас будет работать анимация, и так, для начала нам необходимо определить общие параметры позиционирования: Код .preloader { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: -webkit-radial-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0.8)); z-index: 10; Затем определяем параметры для дочерних элементов, мы задаем соотношения сторон для каждого блока, кроме этого мы устанавливаем вариант трансформации, обратите внимание, что нам необходимо создать эффект волны, по этому количество времени мы будем устанавливать в возрастающем соотношении, кроме этого мы устанавливаем максимальный уровень отклонения по оси X и Y: Код .preloader > .preloader-box { position: absolute; width: 345px; height: 30px; top: 50%; left: 50%; margin: -15px 0 0 -150px; -webkit-perspective: 200px; } .preloader .preloader-box > div { position: relative; width: 30px; height: 30px; background: #CCC; float: left; text-align: center; line-height: 30px; font-family: Verdana; font-size: 20px; color: #FFF; } .preloader .preloader-box > div:nth-child(1) { background: #3366FF; margin-right: 15px; -webkit-animation: movement 600ms ease 0ms infinite alternate; } .preloader .preloader-box > div:nth-child(2) { background: #3366FF; margin-right: 15px; -webkit-animation: movement 600ms ease 75ms infinite alternate; } .preloader .preloader-box > div:nth-child(3) { background: #3366FF; margin-right: 15px; -webkit-animation: movement 600ms ease 150ms infinite alternate; } .preloader .preloader-box > div:nth-child(4) { background: #3366FF; margin-right: 15px; -webkit-animation: movement 600ms ease 225ms infinite alternate; } .preloader .preloader-box > div:nth-child(5) { background: #3366FF; margin-right: 15px; -webkit-animation: movement 600ms ease 300ms infinite alternate; } .preloader .preloader-box > div:nth-child(6) { background: #3366FF; margin-right: 15px; -webkit-animation: movement 600ms ease 375ms infinite alternate; } .preloader .preloader-box > div:nth-child(7) { background: #3366FF; margin-right: 15px; -webkit-animation: movement 600ms ease 450ms infinite alternate; } .preloader .preloader-box > div:nth-child(8) { background: #3366FF; -webkit-animation: movement 600ms ease 525ms infinite alternate; } @-webkit-keyframes movement { from { -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); } to { -webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg); box-shadow: 0 25px 40px rgba(0,0,0,0.4); background: #3399FF; } } В результате мы получаем отличный индикатор, который, наверняка порадует взор посетителя и не отяготит Вашу страничку. Вот и все. Готово! | |
|
Демо Просмотров: 1459
| 12.07.2014, 00:20 |
| Просмотров: 1459 | Загрузок: 0 | | |
Рекомендую к прочтению
| Всего комментариев: 0 | |
Disqus comments
comments powered by Disqus| HTML | |
| BB-Code | |
| Ссылка |
