Pagi ini saya akan membahas tentang
Animasi Loading Dengan CSS Efek Membesar (Scale). Banyak orang yang sudah mengetahui ini dan ada juga orang-orang yang tidak mengetahui ini. Nah, sekarang saya mau berbagi sedikit tips nih buat sobat semoga aja bermanfaat ya. Nah, kalau ada yang intropeksi atau tambahan tolong beri krik atau saran ya karena sedikit ilmu sangat bermanfaat bagi saya dan jangan lupa tinggalkan komentar sobat.
Mari kita simak tutorial berikut :
- Login ke akun blogger sobat
- Setelah masuk ke Dashboard klik Template dan klik EDIT HTML
- Letakkan kode css berikut tepat dibawah kode ]]></b:skin>
<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>
*Silahkan ganti dengan selera sobat masing-masing
Ganti body dengan element yang ingin sobat beri efek misalnya #sidebar-wrapper, #main-wrapper
10s merupakanwaktu bergeraknya efek, semakin besar angkanya maka semakin lambat.
Jika sobat ingin menerapkan efek ini ke semua element kode pemanggilnya seperti ini
* {
-webkit-animation:membesar 10s;
-moz-animation:membesar 10s;
-ms-animation:membesar 10s;
-o-animation:membesar 10s;
animation:membesar 10s;
}
semoga berhasil ya sob, "SUKSES SELALU" ...