Kali ini saya akan share tutorial membuat loading blog dengan @KeyFrame.
tehnik ini lah yansaya terapkan di blog ini, contohnya adalah pada menu navigasi dan sidebar blog ini hampir sama seperti itu tutorial yang saya share kali ini.
Dari Kiri Ke Kanan
Dari Kiri Ke Kanan
Penerapan Pada Blogkali ini baru satu trik yang saya bagi tentang loading blog trik yang ke dua akan saya share di posting selanjutnya jadi tunggu posting selanjutnya :D
Letakkan kode di bawah ini di atas kode ]]></b:skin>
@-webkit-keyframes zoomnav{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}} @-moz-keyframes zoomnav{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}} @-ms-keyframes zoomnav{from{-ms-transform:translate(-1000px,0px);opacity:0}to{-ms-transform:translate(0px,0px);opacity:1}} @keyframes zoomnav{from{transform:translate(-1000px,0px);opacity:0}to{transform:translate(0px,0px);opacity:1}}
Letakkan kode di bawah ini di bagian code css bagian yang ingin di terapkan trik ini
-webkit-animation:zoomnav 2s;-moz-animation:zoomnav 2s;-ms-animation:zoomnav 2s;animation:zoomnav 2s
hehehe agak ribetya tulisanya gini contohnya: misalnya saya mau terapkan trik ini di bagian navigasi jadi taruh kode tadi di CSS bagian navigasi
CONTOH:
#navigiasi{
-webkit-animation:zoomnav 2s;-moz-animation:zoomnav 2s;-ms-animation:zoomnav 2s;animation:zoomnav 2s
}
Langganan:
Posting Komentar (Atom)
mantep nih izin coba dulu ya...
BalasHapus#komenback http://www.iffatblogger.com/
Ok Bro
HapusNice Post..keren gan
BalasHapuspebryan.blogspot.com
Makasi Bro
Hapusmantap sob ...
BalasHapushttp://siapasihh.blogspot.com
Makasi Bro
Hapuskeren bro kunjungan baliknya www.naufalthedarkness.blogspot.com
BalasHapusoh ya jangan lupa follow udeh ane follback tuh
BalasHapusHehehehheeh saya kurang paham dengan keyframe translate itu..... :D
BalasHapusMakasih Tutorial Blognya Gan !!
BalasHapus#koment balik ye