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:

Blogger

• Border Pelangi Dengan CSS
• Menu Blog Dengan CSS
• Membuat Menu Kaleng Tersembunyi Di Header Dengan CSS
• Keyword Postingan Yang Paling Banyak Dicari Di Google Bulan Januari 2013
• Cara Membuat Bullet Dengan A:Hover
• Domain Blogspot.com Akan Beralih Ke Domain blogspot.co.id
• Tips Agar Blog Mendapatkan SiteLink Google
• Widget Penghitung Mundur Waktu Menuju 2013
• Perbedaan Referensi Dengan Sumber

Tutorial

• Cara Menggunakan WeChat Di Komputer/PC
• Border Pelangi Dengan CSS
• Menu Blog Dengan CSS
• Membuat Menu Kaleng Tersembunyi Di Header Dengan CSS
• Membuat Logo Google Dengan CSS
• Cara Membuat Bullet Dengan A:Hover
• Cara Menghapus Widget Yang Tidak Bisa Dihapus
• Cara Mempopulerkan Artikel Blog Yang Sudah Lama
• Slide To Unlock Untuk Blogger

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.