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/AVvXsEi9ueLnaa93_19J2u-X6GLr3tqDOMwR43eqX_gXxH5jSgf8-fx8Nxyc6QoLz2_VbvTOKNxrhSlzHfeX7RCjKrA6yrUQ_5EcV09viomPbPKlmDbPJ4U_aLgJ_36BMGphtAYJBmhpUOmume0K/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/AVvXsEjpW7gG4mAZlheiN9pH6WQ3EKGU_FtX7eHo5xzO8wlAyzu4ZGIkZyZEzf2yZDeTDSrbFqRjgC_BUFYqC2iAMVR56Bk0xBouQfjcARrVKrSZ40epd2c4rvobyWw5GTK3DHcfImvJrT9l3uJQ/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/AVvXsEjmmJ3n95V4ONvZahgaMG-mFWmGbb9P4IsxP_pF5nLrcG-FE_syvubQ6uWRSmj1MP0nZXePTvtIVCj4SRAVJJ76VLlg8pvbx8R1UFLvC89QRgjk1oJAgoj8N7vDr1pXmA-x6VEOEQ29YGKy/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/AVvXsEjkBIRrTtaQeQ9ZMARc8yBotR3fUasMVTurd1toMBIxZ90h1-17F1c1qS5pANVV830Ies9d9Pf9R_8PPjhG8ArN8b7OUMkaLlEBbJb_1PI08f0ccnNdr1LGbkLVOCNS29-z6CqsIAyTavT5/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/AVvXsEi9ueLnaa93_19J2u-X6GLr3tqDOMwR43eqX_gXxH5jSgf8-fx8Nxyc6QoLz2_VbvTOKNxrhSlzHfeX7RCjKrA6yrUQ_5EcV09viomPbPKlmDbPJ4U_aLgJ_36BMGphtAYJBmhpUOmume0K/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/AVvXsEjpW7gG4mAZlheiN9pH6WQ3EKGU_FtX7eHo5xzO8wlAyzu4ZGIkZyZEzf2yZDeTDSrbFqRjgC_BUFYqC2iAMVR56Bk0xBouQfjcARrVKrSZ40epd2c4rvobyWw5GTK3DHcfImvJrT9l3uJQ/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/AVvXsEjmmJ3n95V4ONvZahgaMG-mFWmGbb9P4IsxP_pF5nLrcG-FE_syvubQ6uWRSmj1MP0nZXePTvtIVCj4SRAVJJ76VLlg8pvbx8R1UFLvC89QRgjk1oJAgoj8N7vDr1pXmA-x6VEOEQ29YGKy/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

Related Post:

Backlink Please !

URL

Code For Forum

HTML Code <a href='http://davidgunawan123.blogspot.com/2013/02/gear-machine-berputar-dengan-css.html' target='_blank'>Gear Machine Berputar Dengan CSS</a>

Anda sedang membaca artikel tentang Gear Machine Berputar Dengan CSS dan anda bisa menemukan artikel Gear Machine Berputar Dengan CSS ini dengan url http://davidgunawan123.blogspot.com/2013/02/gear-machine-berputar-dengan-css.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Gear Machine Berputar Dengan CSS ini sangat bermanfaat, namun jangan lupa untuk meletakkan link Gear Machine Berputar Dengan CSS ataupun link ke D-G Blog sebagai sumbernya. Semoga dengan adanya artikel Gear Machine Berputar Dengan CSS bisa membantu kalian semua.