Очередная демонстрация возможностей CSS3 - анимированные шестерни. В уроке используются кадры, анимации и трансформации CSS3.

Примечание: демонстрация полноценно работает в браузерах Firefox и Chrome / Safari.

Шаг 1. Разметка HTML
Как обычно, все начинается с разметки страницы:

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>

Step 2. CSS
Теперь зададим стили CSS для наших элементов.
css/layout.css

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

Добавлено: 27 Апреля 2018 18:11:43 Добавил: Андрей Ковальчук Нравится 0

Добавить