CSS3 Gear Effect

Mô tả: Gear là hình bánh răng, gear effect : bánh răng chuyển động.Ở đây sử dụng CSS 3.
Kết quả:
CSS3 Gear Effect

HTML & CSS example:
<div class="GearContainer" style="height: 250px; position: relative;">
<div class="counterContainer">
<div class="gear" id="gear1">
</div>
<div class="gear" id="gear2">
</div>
<div class="gear" id="gear3">
</div>
</div>
</div>
<style type="text/css">

/*CounterPageGEAR*/
/* CSS3 keyframes */
@-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);
    }
}

/* 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/AVvXsEgQj-G_4sRwPWy9telLRspn4pv8JoemNUpemLaYH7BvPlw300OWfcxArkAr4HeKSxKTH3jqPFkfGqU_MQoIJOYy-VPhwGN_TqHPupsVved-cpdCXtGg5t5-Qdk1YUlhR1etusC6LNmdDxT_/s1600/g1.png') no-repeat 0 0;
    height: 85px;
 left: 170px;
    top: 110px;
    width: 85px;
   
    -moz-animation-name: ckw;
    -moz-animation-duration: 10s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 10s;
}
#gear2 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCLZjKT6BlyUHIHeR1q9SZcpAXbceKsKpg8gF2pbY3ZqOQCHMp-r7rsYjStmXaPicXwc1Sg_G04uQ8Pf4pCW0oWTdWqOFHT8ZZc4e6Kk16Gj4TPDdkuBeiPZNwV_RD0C-1E5oSgbq345kn/s1600/g2.png') no-repeat 0 0;
    height: 125px;
    left: 90px;
    top: 20px;
    width: 125px;
   
    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}
#gear3 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyF6RpM_fEG2sIKt2Pzs0cPT9u6F00pVTnLyIjSOPFp8h76OeGTwKkf14UclmEfar90ojyM0HYFb1RRvHml8svH-OcDgNXh2AbWUerHySSdxn4BPxLBck6Pgi9ay84fdeWtjD5Du66iPYU/s1600/g3.png') no-repeat 0 0;
    height: 103px;
    left: 201px;
    top: 12px;
    width: 103px;
   
    -moz-animation-name: ckw;
    -moz-animation-duration: 13.5s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 13.5s;
}</style> 

Tham khảo từ: http://www.script-tutorials.com/demos/247/index.html