Cara Membuat Efek Bergetar Pada Gambar Postingan Blog

Cara Membuat Efek Getar Pada Gambar Di Postingan Blog, Kali Ini Sobat Blogspot ingin berbagi tutorial tentang cara membuat efek getar pada gambar postingan blog.

Langsung saja ke tutorialnya :

1. Buka Menu Tema , kemudian klik Edit HTML.

2. Tambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

.post-body a img{box-shadow: 0px 0x 6px rgba(0, 0, 0, 0, 5);

border-radius:10px;}

.post-body a img:hover{

animation:ignielShake 0.82s cubic-bezier(.36,.07,.19,.97) both;

transform:translate3d(0, 0, 0);

backface-visibility:hidden;

perspective:1000px}

@keyframes ignielShake{

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 ignielShake{

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)}}

3. Jika sudah klik simpan dan lihat hasilnya ,semua gambar yang ada di postingan blog akan bergetar saat di sentuh.

Akhir kata.

Sangat mudah bukan, 

Script CSS diatas sudah bisa langsung digunakan dan otomatis berfungsi terhadap gambar-gambar yang pernah diposting sebelumnya tanpa harus melakukan pemanggilan script terlebih dahulu. Jadi, Anda tidak susah-susah lagi mengedit setiap gambar yang akan diberikan efek bergoyang ketika membuat sebuah posting.