kali ini WillySEO akan membahas tentang animasi loading
halaman pada blog dengan memanfaatkan css @keyframes, artikel yang lalau WillySEO pernah membahas "Mempercantik Load Blog Dengan @KeyFrame"
dan inipun sama hanya saja untuk efek kali ini ada memebesar, tampilan
blog terlihat kecil dan lama-kelamaan menjadi besar seperti tampilan
normal.. Lihat saja DEMO agar lebih jelas.
Untuk penerapanya sama dengan css efek Highlight, cukup tambahan kode css3 dibawah ini diatas kode :
]]></b:skin>
.Kode CSS
<style>
@-webkit-keyframes membesar {
from { -webkit-transform: scale(0.1) }
to { -webkit-transform: scale(1.0) }
}
@-moz-keyframes membesar {
from { -moz-transform: scale(0.1) }
to { -moz-transform: scale(1.0) }
}
@-o-keyframes membesar {
from { -o-transform: scale(0.1) }
to { -o-transform: scale(1.0) }
}
@-ms-keyframes membesar {
from { -ms-transform: scale(0.1) }
to { -ms-transform: scale(1.0) }
}
@keyframes membesar {
from { transform: scale(0.1) }
to { transform: scale(1.0) }
}
body {
-webkit-animation:membesar 10s;
-moz-animation:membesar 10s;
-ms-animation:membesar 10s;
-o-animation:membesar 10s;
animation:membesar 10s;
}
</style>
Catatan: Ganti body dengan element yang ingin anda beri efek misalnya #sidebar-wrapper.
10s merupakan waktu bergeraknya efek, semakin besar angkanya maka semakin lambat. Jika ingin menerapkan efek ini pada semua element kodenya pemanggilnya seperti ini.
- Simpan template
Jika ingin menerapkan efek ini pada semua element kodenya pemanggilnya seperti ini :
Kode CSS
* {
-webkit-animation:membesar 10s;
-moz-animation:membesar 10s;
-ms-animation:membesar 10s;
-o-animation:membesar 10s;
animation:membesar 10s;
}
wih mantap dah gan
ReplyDeletehehe :)
DeleteDuh... masih lama templatenya yg mau dishare nih
ReplyDeleteorang sabar disayang tuhan :D
Delete