Cara Membuat Animasi Sepeda Dengan CSS

07:47:00 25 Comments
Cara Membuat Animasi Sepeda Dengan CSS


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 

Selamat pagi semuanya ? :D

semoga sehat semua yah, dan masih semangat untuk belajar coding nya heheh  ^_^

pada Tutorial sebelumnya saya sudah Membuat Animasi Dengan CSS yaitu Animasi Kompas
yang bisa anda lihat tutorial dan demonya DISINI

Nah pada  kesempatan kali ini saya akan memberikan tutorial mengenai pembuatan animasi lagi yaitu Cara Membuat Animasi Sepeda Dengan CSS
pada kali ini animasi yang saya buat adalah animasi Sepeda yang sedang berjalan
Animasi ini hanya menggunakan css, mohon maaf di karenakan saya belum mampu membuat animasi dengan css Jadi animasi ini bukan buatan saya, melainkan programmer  yang bernama Alex Bergin
karya dia sengaja saya share karena saya menyukai karyanya dan agar kita semua dapat melihat karyanya. dari pada penasaran,
Langsung saja kita praktekan, silahkan ikuti langkah-langkah di bawah ini dengan benar.


1. Membuat File HTML
saya ingatkan file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="description">is for Bicycle</div>

<div id="animation">
    <div class="bike">
        
        <div class="bell">
            <div class="ringer">
                <div class="lever"></div>
            </div>
            <div class="audio">
                <div></div>
                <div></div>
                <div></div>
            </div>            
            <div class="stand"></div>
        </div>
        
        <div class="front wheel">
            <div class="rim">
                <div class="air"></div>
            </div>
            <div class="hub"></div>
            <div class="spokes">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        
        <div class="frame">
            <div></div>
            <div></div>
            <div></div>
            <div class="small"></div>
            <div></div>
            <div></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
        
        <div class="seat">
            <div class="support"></div>
            <div class="saddle"></div>
        </div>
        
        <div class="handlebars">
            <div class="frameConnector"></div>
            <div class="handle"></div>
        </div>
        
        <div class="pedals">
            <div class="gear">
                <div class="hub"></div>
                <div class="struts">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="front pedal">
                <div class="footpad"></div>
            </div>
            <div class="back pedal">
                <div class="footpad"></div>
            </div>
        </div>
        
        <div class="back wheel">
            <div class="rim">
                <div class="air"></div>
            </div>
            <div class="hub"></div>
            <div class="gear"></div>
            <div class="spokes">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
Sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa teks yang gk jelas,
agar terbentuk animasi sepedanya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
Nah ini dia file inti pada tutorial kali ini, kenapa di sebut file inti, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

* {
    padding: 0;
    margin: 0;
}

html , body {
    width: 100%;
    height: 100%:
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0%;
}

html {
    background-color: rgba(255,250,250,1);    
}

#description {
    position: fixed;
    bottom: 10px;
    width: 100%;
    z-index: 100;
    font-family: Helvetica;
    font-weight: 200;
    color: rgba(18,22,26,0.7);
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
}

.bell {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -99px;
    margin-left: -117px;
    z-index: 100;
}

.bell .stand {
    position: absolute;
    background-color: rgba(18,22,26,0.4);
    width: 6px;
    height: 3px;
}

.bell .lever {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: rgba(18,22,26,0.2);
    margin-top: 3px;
    margin-left: 14px;
    z-index: -1;
}

.bell .ringer {
    position: absolute;
    width: 14px;
    height: 6px;
    margin-left: -4px;
    margin-top:-6px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: rgba(246,188,49,0.6);
    animation: audioMove 5s linear 0s infinite alternate none;
 -webkit-animation: audioMove 5s linear 0s infinite alternate none;
}

.bell .audio {
    margin-top: -8px;
    margin-left: 4px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
}

.bell .audio div {
    width: 15px;
    border-top: 1px dashed rgba(246,188,49,0.6);
    animation: audioLines 5s linear 0s infinite alternate none;
 -webkit-animation: audioLines 5s linear 0s infinite alternate none;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    position: absolute;
}

.bell .audio div:nth-of-type(1){
    margin-top: -9px;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

.bell .audio div:nth-of-type(2){
    margin-left: 1px;
}

.bell .audio div:nth-of-type(3){
    margin-top: 9px;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
}

.seat .support {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 39px;
    margin-top: -95px;
    width: 8px;
    height: 40px;
    background-color: rgba(235,238,241,1);
    -webkit-transform: rotate(14deg);
    -moz-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    -o-transform: rotate(14deg);
    transform: rotate(14deg);
}

.seat .saddle {
    width: 40px;
    height: 15px;
    border-right: 32px solid rgba(75,78,81,1);
    border-top: 8px solid rgba(75,78,81,1);
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 5px;
    margin-top: -100px;
}

.seat .saddle:before {
    content:".";
    position: absolute;
    color: rgba(0,0,0,0);
    width: 40px;
    height: 15px;
    border-top-right-radius: 30px;
    border-top: 8px solid rgba(75,78,81,1);
    border-right: 8px solid rgba(75,78,81,1);
    margin-top: -8px;
}

.handlebars {
    z-index: 10;
}

.handlebars .frameConnector {
    position: absolute;
    border-right: 8px solid rgba(235,238,241,1);
    border-top: 8px solid rgba(235,238,241,1);
    border-top-right-radius: 50px;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -117px;
    margin-top: -98px;
}

.handlebars .handle {
    position: absolute;
    border-right: 8px solid rgba(75,78,81,1);
    border-bottom: 8px solid rgba(75,78,81,1);
    border-bottom-right-radius: 50px;
    left: 50%;
    width: 40px;
    height: 30px;
    margin-left: -158px;
    margin-top: -97px;
}

.frame div {
    position: absolute;
    background-color: rgba(255,74,83,1);
    border-radius: 8px;
    top: 50%;
    left: 50%;
    width: 8px;
    margin-left: -4px;
    z-index: 100;
}

.frame div.small {
    width: 4px;
    margin-left: -2px;
}

.frame div:nth-of-type(1){
    height: 128px;
    margin-top: -67px;
    margin-left: 20px;
    -webkit-transform: rotate(14deg);
    -moz-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    -o-transform: rotate(14deg);
    transform: rotate(14deg);
}

.frame div:nth-of-type(2){
    height: 118px;
    margin-top: -4px;
    margin-left: 62px;
    -webkit-transform: rotate(86deg);
    -moz-transform: rotate(86deg);
    -ms-transform: rotate(86deg);
    -o-transform: rotate(86deg);
    transform: rotate(86deg);
}

.frame div:nth-of-type(3){
    height: 155px;
    margin-top: -71px;
    margin-left: -50px;
    -webkit-transform: rotate(-46deg);
    -moz-transform: rotate(-46deg);
    -ms-transform: rotate(-46deg);
    -o-transform: rotate(-46deg);
    transform: rotate(-46deg);
}

.frame div:nth-of-type(4){
    height: 141px;
    margin-top: -78px;
    margin-left: 77px;
    -webkit-transform: rotate(-36deg);
    -moz-transform: rotate(-36deg);
    -ms-transform: rotate(-36deg);
    -o-transform: rotate(-36deg);
    transform: rotate(-36deg);
}

.frame div:nth-of-type(5){
    height: 141px;
    margin-top: -133px;
    margin-left: -32px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.frame div:nth-of-type(6){
    height: 45px;
    margin-top: -76px;
    margin-left: -104px;
    -webkit-transform: rotate(19deg);
    -moz-transform: rotate(19deg);
    -ms-transform: rotate(19deg);
    -o-transform: rotate(19deg);
    transform: rotate(19deg);
}

.frame div:nth-of-type(7){
    height: 97px;
    margin-top: -43px;
    margin-left: -120px;
    -webkit-transform: rotate(14deg);
    -moz-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    -o-transform: rotate(14deg);
    transform: rotate(14deg);
}

.frame div:nth-of-type(8){
    height: 97px;
    margin-top: -43px;
    margin-left: -118px;
    -webkit-transform: rotate(16deg);
    -moz-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    -o-transform: rotate(16deg);
    transform: rotate(16deg);
}

.pedals {
    position: absolute;
    z-index: 101;
    top: 50%;
    left: 50%;
    margin-top: 60px;
    margin-left: 8px;
    animation: wheelSpin 2.2s linear 0s infinite reverse none;
 -webkit-animation: wheelSpin 2.2s linear 0s infinite reverse none;
}

.pedals .gear {
    border: 6px solid rgba(75,78,81,1);
    border-radius: 150px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 38px;
    height: 38px;
    z-index: 1;
    overflow: hidden;
}

.pedals .gear .hub {
    background-color: rgba(95,98,101,1);
    width: 16px;
    height: 16px;
    border-radius: 20px;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    z-index:2;
}

.pedals .gear .struts {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

.pedals .gear .struts div {
    width: 6px;
    height: 20px;
    position: absolute;
    background-color: rgba(75,78,81,1);
    top: 50%;
    left: calc( 50% - 3px );
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.pedals .gear .struts div:nth-of-type(1){
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.pedals .gear .struts div:nth-of-type(2){
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
}

.pedals .gear .struts div:nth-of-type(3){
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
}

.pedals .gear .struts div:nth-of-type(4){
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
}

.pedals .gear .struts div:nth-of-type(5){
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
}

.pedals .pedal {
    background-color: rgba(255,74,83,1);
    border-radius: 10px;
    position: absolute;
    top: calc(50% - 3px);
    left: calc(50% - 3px);
    width: 5px;
    height: 35px;
    z-index: 5;
}

.pedals .pedal .footpad {
    width: 16px;
    height: 5px;
    border-radius: 4px;
    position: absolute;
    z-index: 200;
    margin-left: -6px;
    margin-top: 31px;
    background-color: rgba(255,74,83,1);
    animation: wheelSpin 2.2s linear 0s infinite normal none;
 -webkit-animation: wheelSpin 2.2s linear 0s infinite normal none;
}

.pedals .pedal.back {
    z-index: -1;
    margin-top: -35px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.front.wheel {
    margin-left: -130px;
}

.back.wheel {
    margin-left: 120px;
}

.wheel {
    width: 144px;
    height: 144px;
    margin-top: 50px;
    border-radius: 150px;
    position: absolute;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    border: 4px solid rgba(18,22,26,0.7);
    overflow: hidden;
    border-radius: 150px;
    animation: wheelSpin 1.6s linear 0s infinite reverse none;
 -webkit-animation: wheelSpin 1.6s linear 0s infinite reverse none;
}

.wheel .hub {
    background-color: rgba(115,118,121,1);
    border: 2px dotted rgba(235,238,241,0.5);
    width: 10px;
    height: 10px;
    border-radius: 150px;
    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
    z-index: 12;
}

.wheel .gear {
    background-color: rgba(75,78,81,1);
    border: 3px dotted rgba(255,250,250,1);
    border-radius: 150px;
    position: absolute;
    top: calc(50% - 13px);
    left: calc(50% - 13px);
    width: 20px;
    height: 20px;
    z-index: -1;
}

.wheel .rim {
    position: absolute;
    width: calc( 100% - 16px );
    height: calc( 100% - 16px );
    border: 8px solid rgba(235,238,241,1);
    border-radius: 150px;
    z-index: 12;
}

.wheel .rim .air {
    position: absolute;
    background-color: rgba(18,22,26,1);
    left: 50%;
    width: 2px;
    height: 6px;
    border-radius: 5px;
    z-index: 14;
    margin-left: -8px;
}

.back.wheel .rim .air {
    bottom: 0;
}

.wheel .spokes div {
    position: absolute;
    width: 0px;
    height: 144px;
    border-left: 2px solid rgba(18,22,26,0.5);
    margin-left: calc( 50% - 1px );
}

.wheel .spokes div:nth-of-type(1){
    -webkit-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}

.wheel .spokes div:nth-of-type(2){
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wheel .spokes div:nth-of-type(3){
    -webkit-transform: rotate(67.5deg);
    transform: rotate(67.5deg);
}

.wheel .spokes div:nth-of-type(4){
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.wheel .spokes div:nth-of-type(5){
    -webkit-transform: rotate(112.5deg);
    transform: rotate(112.5deg);
}

.wheel .spokes div:nth-of-type(6){
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.wheel .spokes div:nth-of-type(7){
    -webkit-transform: rotate(157.5deg);
    transform: rotate(157.5deg);
}

.wheel .spokes div:nth-of-type(8){
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

@keyframes wheelSpin {
 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);} 
 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 
}

@-webkit-keyframes wheelSpin {
 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);} 
 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 
}

@keyframes audioLines {
 100% { width: 0px;}
    81% { width: 0px;} 
 78% { width: 15px;} 
 75% { width: 0;} 
 72% { width: 15px;} 
 69% { width: 0px;} 
 0% { width: 0px;} 
}

@-webkit-keyframes audioLines {
 100% { width: 0px;} 
    81% { width: 0px;} 
 78% { width: 15px;} 
 75% { width: 0;} 
 72% { width: 15px;} 
 69% { width: 0px;} 
 0% { width: 0px;} 
}

@keyframes audioMove {
 100% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 81% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 78% { -webkit-transform: translate(2px , 0px); -moz-transform: translate(2px , 0px); -ms-transform: translate(2px , 0px); -o-transform: translate(2px , 0px); transform: translate(2px , 0px);} 
 75% { -webkit-transform: translate(-2px , 0px) rotate( -10deg ); -moz-transform: translate(-2px , 0px) rotate( -10deg ); -ms-transform: translate(-2px , 0px) rotate( -10deg ); -o-transform: translate(-2px , 0px) rotate( -10deg ); transform: translate(-2px , 0px) rotate( -10deg );} 
 72% { -webkit-transform: translate(2px , 0px) rotate( 10deg ); -moz-transform: translate(2px , 0px) rotate( 10deg ); -ms-transform: translate(2px , 0px) rotate( 10deg ); -o-transform: translate(2px , 0px) rotate( 10deg ); transform: translate(2px , 0px) rotate( 10deg );} 
 69% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 0% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
}

@-webkit-keyframes audioMove {
 100% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 81% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 78% { -webkit-transform: translate(2px , 0px); -moz-transform: translate(2px , 0px); -ms-transform: translate(2px , 0px); -o-transform: translate(2px , 0px); transform: translate(2px , 0px);} 
 75% { -webkit-transform: translate(-2px , 0px) rotate( -10deg ); -moz-transform: translate(-2px , 0px) rotate( -10deg ); -ms-transform: translate(-2px , 0px) rotate( -10deg ); -o-transform: translate(-2px , 0px) rotate( -10deg ); transform: translate(-2px , 0px) rotate( -10deg );} 
 72% { -webkit-transform: translate(2px , 0px) rotate( 10deg ); -moz-transform: translate(2px , 0px) rotate( 10deg ); -ms-transform: translate(2px , 0px) rotate( 10deg ); -o-transform: translate(2px , 0px) rotate( 10deg ); transform: translate(2px , 0px) rotate( 10deg );} 
 69% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 0% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
}


silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
lihat apa yang terjadi di browsermu :D

Demikianlah Cara Membuat Animasi Sepeda Dengan CSS, keren bukan ? :D
Jika anda ingin melihat hasilnya atau demonya Silahkan anda buka halaman demonya di bawah ini

Demo
click to view

Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D


وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ


SHARE THIS
Unknown

Author:

Previous Post
Next Post
NYAMUKKURUS
6 October 2015 at 10:59

mantab gan css nya, bisa bergerak gitu ban sama pedal sepeda nya, nanti coba ah, makasih ya gan

Reply
avatar
Anonymous
6 October 2015 at 13:19

Wih mantep :D
thanks gan infonya |o|

Reply
avatar
Purwati
6 October 2015 at 14:07

pengetahuan baru nih.. thx ya min...

Reply
avatar
masfanyt
6 October 2015 at 15:10

wah bermanfaat sekali gan , thanks ilmunya :D

Reply
avatar
Unknown
6 October 2015 at 15:37

wah sepeda saya suka saya suka :v

Reply
avatar
admin
6 October 2015 at 16:57

wih gua dah coba berhasil,, mantap-mantap..

Reply
avatar
Iswandi
6 October 2015 at 20:35

Boleh d coba juga ni gan

Reply
avatar
Unknown
7 October 2015 at 05:10

keren gan,besok2 bikin efek transformer gan

Reply
avatar
ufieklz
7 October 2015 at 06:37

ehhh ada ya sampe kepikiran buat sepeda pakek CSS , kmren ane buat mobil pake CSS lumayan lama merangkainya :D nice share gan

Reply
avatar
Unknown
7 October 2015 at 06:48

Keren gan, ijin coba yah mayan nambah ilmu CSS :D

Reply
avatar
Muhammad taufiq nur
7 October 2015 at 06:50

dari demo nya keren nih animasi nya, ijin nyoba gan..

Reply
avatar
Unknown
7 October 2015 at 07:22

nice share gan, d tunggu artikel unik dan menarik selanjutnya

Reply
avatar
Rio Setyawan
7 October 2015 at 08:34

wew keren nih pake css, :D jadi ringan :)

Reply
avatar
Anonymous
7 October 2015 at 09:06

Ijin coba dulu bro but mkasih infonya

Reply
avatar
No-er
7 October 2015 at 20:04

Keren CSS nya bro mau coba ah

Reply
avatar
Unknown
7 October 2015 at 20:20

unik banget nih artikel, ijin praktek pak bos (y)

Reply
avatar
Arie Sujadnorwanto
8 October 2015 at 08:54

jadi semudah itu ya membuat animasi, berasa jadi animator gan

Reply
avatar
Mas Tamvan
8 October 2015 at 12:39

wah keren banget gan jadinya . .

Reply
avatar
Diary
9 October 2015 at 12:53

keren gan kyk halaman depan pas buka google...

Reply
avatar
Unknown
10 October 2015 at 15:05

dapet ilmu baru nihh,,, siip

Reply
avatar
Subscribe to: Post Comments (Atom)