Автор

08 04.2013
Анимированный механизм с помощью CSS3

Анимированный механизм с помощью CSS3


 

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

 

ДЕМО
ИСХОДНИКИ

 

Следует заметить, что работа данного эффекта будет производиться только в браузерах Firefox и Chrome / Safari. И так, начнем, как всегда мы начнем с простой разметки 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>

 


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


Теперь мы рассмотрим правила CSS3, с помощью которых будет осуществляется анимация. Вид шестеренок будут осуществлять изображения в формате .png

/* Кадры CSS3 */
@-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);
    }
}

/* Шестерни */
.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;
}

 


Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

22 02.2017
Анимированный механизм с помощью CSS3

У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы? С помощью CSS тени эту проблему легко решить, используя свойство text-shadow, чтобы улучшить читабельность и контрастность текста.


14 06.2013
Анимированный механизм с помощью CSS3

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.


26 04.2013
Анимированный механизм с помощью CSS3

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


04 06.2017
Анимированный механизм с помощью CSS3

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


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close