Skip to content Skip to sidebar Skip to footer

Membuat efek gambar blog bergoyang

Membuat efek gambar blog bergoyang

Ini berlaku untuk semua gambar di blog kalau cursor menyentuh gambar akan bergoyang-goyang. Dan kalau sebelumnya sudah pasang efek image sebaiknya di delete dulu. Ini khusus untuk browser Safari dan Chrome dengan menggunakan CSS3.

Membuat efek gambar blog bergoyang:

1.Login > Dasbor > Template > edit HTML
2.Tick Expand template widget dan tekan F3/CTRL +F cari kode:
/* Header 
3.Copy paste kode berikut dan letakkan di atasnya/kode no 2:

img{
-webkit-transition: 2.0s;
-moz-transition: 2.0s;}
img:hover{
-webkit-animation-name: shake;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

4.Tekan preview atau pratinjau dan simpan template, selamat mencoba.

2 comments for "Membuat efek gambar blog bergoyang"