loading blog efek system bar

9 Sep 2013

Blog tanpa varisi ibarat sayur kurang garam. kali ini saya akan share tentang loading blog dengan efek SKYIN, SYSTEM_BAR dan SYSTEM :

1. SKYIN efek nya dari atas turun ke bawah 
2. SYSTEM_BAR efek nya dari bawah naik ke atas 
3. SYSTEM efeknya keluar dari samping kiri

Dibawah ini contoh dari penerapan di atas dan demonya pun saya pasang sementara di blog ini
Loading dengan efek "System" saya terapkan pada #main-wrappar

#main-wrapper {
-moz-animation:System 5s;
-webkit-animation:System 5s;
}
@-webkit-keyframes System{from{-webkit-transform:translate(0px,1000px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes System{from{-moz-transform:translate(0px,1000px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}
}

Loading dengan efek "Skyin" saya terapkan pada #header

#header{
-webkit-animation:Skyin 4s;
-moz-animation:Skyin 4s;
}
@-webkit-keyframes Skyin{from{-webkit-transform:translate(0px,-1000px)}to{-webkit-transform:translate(0px,0px)}
}
@-moz-keyframes Skyin{from{-moz-transform:translate(0px,-1000px)}to{-moz-transform:translate(0px,0px)}
}

Loading dengan efek "System_Bar" saya terapkan pada #site-nav

#site-nav {
-webkit-animation:System_Bar 4s;
-moz-animation:System_Bar 4s;
}
@-webkit-keyframes System_Bar{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes System_Bar{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}
}

Itulah ulasan yang singkat tentang cara bikin dan pasang loading blog dengan efek yang mengunakan murni css
Contoh di atas saya terapkan di halaman ini. silahkan refresh halaman ini buat melihat efek nya

css

Taufik 19.34