Gear Machine Berputar Dengan CSS

 

Gear berputar, kali inilah yang akan di share D-G BLOG. Sebenarnya ini sih post kurang kerjaan karena saya kagak ada ide lagi jadi menggunakan css simple. Sebenarnya ini hanya kumpulan dari keyframes dan animation saja. Namun dengan ini kalian bisa mengkreasikannya dan merubahnya menjadi yang kalian inginkan.
Kalau untuk demo tidak saya buat namun bentuknya 100% mirip dengan gambar diatas.

Kalau mau buat ini dia CSS dan HTMLnya

CSS 

<style>
body {
 background: gray;
 }
@-webkit-keyframes gear {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes gear {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes ggear {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes ggear {
    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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0GY8mmMJHoE8Vel8B70ScKKBBEVt8-C7VbZ8m08rwNQiE8bgUlr8uaareX08lHErX295Ny33LCdu0CuhkWRtyR-up_kd4gKY0R-L_rLPZx6j4wHKjb3yJwln6qoywHypd_TmInZ7inAl/s400/g1.png') no-repeat 0 0;
    height: 85px;
    left: 31px;
    top: 45px;
    width: 85px;

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

    -webkit-animation-name: gear;
    -webkit-animation-duration: 0.2s;
}
#gear2 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUDAxWIbw2mpExWUh3Ls2isevdeTRJZIdR-QhiFMnpY0Y3tPoU_0Ksl04hn9OWetWv_WXpYzVvt4ruF6TAtJQiZG-UexihHAgbLptRi14_x9t3oTYHyvOxqGHNr94LuLkWh53Ojz6aFCG/s400/g2.png') no-repeat 0 0;
    height: 125px;
    left: 105px;
    top: 10px;
    width: 125px;

    -moz-animation-name: ggear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: ggear;
    -webkit-animation-duration: 1s;
}
#gear3 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnoA7Cm2DHolmOJDRJjnYsWcS-XpUXYSPUZHi2nzfZ7-hSIODnl_16PG-w2Jr6LnLox-Jl7viCqvgj2coEl9rnGsSJOR5GfusmttvrffsaIy8J4wNkXNENNLIltV_oBbbtRI2DkI6GVD9R/s400/g3.png') no-repeat 0 0;
    height: 103px;
    left: 149px;
    top: 118px;
    width: 103px;

    -moz-animation-name: gear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: gear;
    -webkit-animation-duration: 1s;
}
#gear4 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JTmJTbsrSjLKGoBuVmQXl8ExnW-bQY_V7GA8b-fQNOCYRcXM_0lAuwpx4PSMQ6Te-YWGlaP1F71VcTrl9WHoWU70uHfHicEW-6NatX9VjlYCRwANN3SdehSWPCuin5V8izWch9Wlxysr/s400/g4.png') no-repeat 0 0;
    height: 140px;
    left: 46px;
    top: 173px;
    width: 144px;

    -moz-animation-name: ggear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: ggear;
    -webkit-animation-duration: 1s;
}
#gear5 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0GY8mmMJHoE8Vel8B70ScKKBBEVt8-C7VbZ8m08rwNQiE8bgUlr8uaareX08lHErX295Ny33LCdu0CuhkWRtyR-up_kd4gKY0R-L_rLPZx6j4wHKjb3yJwln6qoywHypd_TmInZ7inAl/s400/g1.png') no-repeat 0 0;
    height: 90px;
    left: 127px;
    top: 292px;
    width: 85px;

    -moz-animation-name: gear;
    -moz-animation-duration: 0.2s;

    -webkit-animation-name: gear;
    -webkit-animation-duration: 0.2s;
}
#gear6 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUDAxWIbw2mpExWUh3Ls2isevdeTRJZIdR-QhiFMnpY0Y3tPoU_0Ksl04hn9OWetWv_WXpYzVvt4ruF6TAtJQiZG-UexihHAgbLptRi14_x9t3oTYHyvOxqGHNr94LuLkWh53Ojz6aFCG/s400/g2.png') no-repeat 0 0;
    height: 125px;
    left: 200px;
    top: 283px;
    width: 125px;

    -moz-animation-name: ggear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: ggear;
    -webkit-animation-duration: 1s;
}
#gear7 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnoA7Cm2DHolmOJDRJjnYsWcS-XpUXYSPUZHi2nzfZ7-hSIODnl_16PG-w2Jr6LnLox-Jl7viCqvgj2coEl9rnGsSJOR5GfusmttvrffsaIy8J4wNkXNENNLIltV_oBbbtRI2DkI6GVD9R/s400/g3.png') no-repeat 0 0;
    height: 105px;
    left: 277px;
    top: 217px;
    width: 103px;

    -moz-animation-name: gear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: gear;
    -webkit-animation-duration: 1s;
}
</style>

Didalam kode tersebut terdapat css keyframes dan transformation. Dan kalian dapat mengganti gambarnya dengan link gambar sesuka kalian dan waktu berputarnya.

<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>

Namun sayangnya kode atau gear ini hanya dapat muncul di firefox dan google chrome dan sejenisnya dan Kecuali IE.

---

Jadi ini hanya post simple semoga bermanfaat.
Sekian dari D-G BLOG
Terima kasih