—»     —»   Анимированные шестеренки посредством CSS3
  Раздел: Анимация, CSS/Style Sheets   Нет комментариев  

Анимированные шестеренки посредством CSS3



В нашем сегодняшнем уроке мы будем заниматься разработкой шестеренок, анимированных посредством CSS3. Результат получится очень милым. Мы использовали слайды CSS3, анимацию и трансформации (rotate) для того, чтобы достичь подобного результата. Пожалуйста, обратите внимание, что данное демо будет работать в Firefox и Chrome / Safari (webkit).

Анимированные шестеренки посредством CSS3

Давайте посмотрим на примеры, и скачаем предложенные исходные файлы:

Посмотреть демо | Скачать архив
Внимание! У вас нет прав для просмотра скрытого текста.


Этап 1 – HTML

Как обычно, начнем с разработки кода HTML. Предлагаем вам html-код нашего примера. Здесь все основано на простеньких div-элементах.

index.html

<div class="container">
<div class="gear" id="gear1"></div>
<div class="gear" id="gear2"></div>
<div class="gear" id="gear3"></div>
<div class="gear" id="gear4"></div>
<div class="gear" id="gear5"></div>
<div class="gear" id="gear6"></div>
<div class="gear" id="gear7"></div>
</div>

Этап 2 - CSS

Теперь предлагаем вам файл стилей для наших шестеренок.

css/layout.css

/* CSS3 keyframes */
@-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}

/* gears */
.gear {
float: none;
position: absolute;
text-align: center;

-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#gear1 {
background: url('../images/g1.png') no-repeat 0 0;
height: 85px;
left: 31px;
top: 45px;
width: 85px;

-moz-animation-name: ckw;
-moz-animation-duration: 10s;

-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear2 {
background: url('../images/g2.png') no-repeat 0 0;
height: 125px;
left: 105px;
top: 10px;
width: 125px;

-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;

-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear3 {
background: url('../images/g3.png') no-repeat 0 0;
height: 103px;
left: 149px;
top: 118px;
width: 103px;

-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;

-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}
#gear4 {
background: url('../images/g4.png') no-repeat 0 0;
height: 144px;
left: 46px;
top: 173px;
width: 144px;

-moz-animation-name: cckw;
-moz-animation-duration: 20.2s;

-webkit-animation-name: cckw;
-webkit-animation-duration: 20.2s;
}
#gear5 {
background: url('../images/g1.png') no-repeat 0 0;
height: 85px;
left: 127px;
top: 292px;
width: 85px;

-moz-animation-name: ckw;
-moz-animation-duration: 10s;

-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear6 {
background: url('../images/g2.png') no-repeat 0 0;
height: 125px;
left: 200px;
top: 283px;
width: 125px;

-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;

-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear7 {
background: url('../images/g3.png') no-repeat 0 0;
height: 103px;
left: 277px;
top: 217px;
width: 103px;

-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;

-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}

Этап 3 - Изображения

В примере мы использовали следующие изображения:

Анимированные шестеренки посредством CSS3
Анимированные шестеренки посредством CSS3
Анимированные шестеренки посредством CSS3
Анимированные шестеренки посредством CSS3

Заключение

Надеемся, что вам понравилось наше сегодняшнее руководство. Не забудьте о комментариях и идеях! Удачи!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 11841   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Интернет магазин с нуля
Детский магазин / Косметика для малыша Моё солнышко. Купите сейчас
cart-power.ru
Асик майнер
Успей заказать Antminer асик ! Быстрая доставка, низкая цена
optimine.ru
Ритуальные принадлежности
Ритуальные товары оптом со склада! Искусственные цветы, венки, корзины
ритуал-екб.рф
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930