Hello sobat ICloudzer kali ini ini admin bakalan menjabarkan mengenai cara membuat efek animasi pada gambar di blogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Efek Animasi Gambar
Efek animasi gambar merupakan tampilan animasi bergerak yang di terapkan pada postingan gambar di blogger, efek animasi gambar akan secara otomatis berfungsi jika kamu menerapkan kode pembuat efek animasi pada postingan gambar yang bakal admin jabarkan sebentar lagi
Sedangkan kode yang di gunakan adalah Pure menggunakannya kode CSS saja, jika kamu paham akan class kode CSS kamu bisa atur elemen gambar apa saja yang ingin kamu terapkan dengan efek animasi bergerak pada gambar tersebut
Contoh Tampilan
Okay sobat dari pada penasaran dengan bagaimana kah contoh tampilan animasi bergerak pada gambar di blogger tersebut silahkan periksa menggunakan tombol di bawah ini yak
Info: Bagaimana sobat dengan contoh tampilan dari animasi gambar tersebut, keren ya sobat
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin akan membahas cara menambahkan efek animasi gambar pada postingan di blogger, silahkan di baca dan di ikuti setiap arahan yang bakal admin jelaskan di bawah ini
- Silahkan login ke blogger menggunakan akun google anda
- Selanjutnya silahkan pergi ke menu Theme atau Tema kemudian pilih menu Edit HTML
- Jika sudah silahkan cari kode kode ]]></b:skin>
- kemudian taruh kode CSS di bawah tepat di atasnya
- Silahkan simpan template dan lihat bagaimana hasilnya
img,.pS img,.post img{animation:rahrubberB 1s}img:hover,.pS img:hover,.post img:hover{animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;-moz-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;-webkit-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both; -o-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both; transform:translate3d(0,0,0); backface-visibility:hidden; perspective:1000px;}@keyframes rahshaked { 10%, 90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@-webkit-keyframes rahshaked { 10%, 90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@-moz-keyframes rahshaked {10%,90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@keyframes rahrubberB{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
