Cara Menciptakan Pengaruh Bergoyang Pada Gambar Posting Blog

Posted on
Sebelumnya anda cukup sudah mencoba memasang efek zoom otomatis pada semua gambar posting blog. Nah kali ini admin akan membuat imbas shake atau imbas bergoyang yang di implementasikan didalam gambar kiriman blogspot tanpa ada suplemen mark up apapun dan hanya memakai imbas murni CSS3 yang tak akan terlalu besar lengan berkuasa terhadap beban loading blog anda.

Efek ini akan bekerja pada dikala pengunjung melaksanakan mouse over atau melaksanakan hover baik itu terhadap gambar yang terdapat anchor link inginpun gambar yang tak terdapatnya. Efek shake yang membuat gambar blog anda bergoyang ini akan bekerja pada semua browser menyerupai IE, Firefox, Chrome, Safari, Opera bahkan admin telah mencoba melaksanakan hover pada browser di perangkat android dan imbas inipun bekerja sangat mulus tanpa ada kendala.
Demo

 Sebelumnya anda cukup sudah mencoba memasang  Cara Membuat Efek Bergoyang Pada Gambar Posting Blog

Langkah-langkah membuat imbas bergoyang pada gambarb di blog:

1) Masuk ke dashboard saya blogger anda
2) Klik Template kemudian back up
3) Klik edit tempalte kemudian cari instruksi ]]></b:skin>
4) Salin kemudian pastekan semua css dibawah ini sempurna diatas instruksi tersebut

Klik ganda untuk menyalin
 .entry-content img {  transition-duration:0.5s;  transition-timing-function: ease;  transition-delay:0s;  -moz-transition-duration:0.5s;  -moz-transition-timing-function:ease;  -moz-transition-delay:0s;   -webkit-transition-duration:0.5s;  -webkit-transition-timing-function:ease;  -webkit-transition-delay:0s;  -o-transition-duration:0.5s;  -o-transition-timing-function:ease;  -o-transition-delay:0s;  }  .entry-content img:hover {  animation-name: goyang;  animation-duration: 0.8s;  transform-origin:50% 50%;  animation-iteration-count: infinite;  animation-timing-function: linear;  -moz-animation-name: goyang;  -moz-animation-duration: 0.8s;  -moz-transform-origin:50% 50%;  -moz-animation-iteration-count: infinite;  -moz-animation-timing-function: linear;  -webkit-animation-name: goyang;  -webkit-animation-duration: 0.8s;  -webkit-transform-origin:50% 50%;  -webkit-animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;  }  @keyframes goyang{  0% { transform: translate(2px, 1px) rotate(0deg); }  10% { transform: translate(-1px, -2px) rotate(-1deg); }  20% { transform: translate(-3px, 0px) rotate(1deg); }  30% { transform: translate(0px, 2px) rotate(0deg); }  40% { transform: translate(1px, -1px) rotate(1deg); }  50% { transform: translate(-1px, 2px) rotate(-1deg); }  60% { transform: translate(-3px, 1px) rotate(0deg); }  70% { transform: translate(2px, 1px) rotate(-1deg); }  80% { transform: translate(-1px, -1px) rotate(1deg); }  90% { transform: translate(2px, 2px) rotate(0deg); }  100% { transform: translate(1px, -2px) rotate(-1deg); }  }  @-moz-keyframes goyang{  0% { -moz-transform: translate(2px, 1px) rotate(0deg); }  10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }  20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }  30% { -moz-transform: translate(0px, 2px) rotate(0deg); }  40% { -moz-transform: translate(1px, -1px) rotate(1deg); }  50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }  60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }  70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }  80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }  90% { -moz-transform: translate(2px, 2px) rotate(0deg); }  100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }  }  @-webkit-keyframes goyang{  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); }  } 

5) Klik Simpan

Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka imbas bergoyang pun akan mengiringinya pada dikala anda melaksanakan hover. Enjoy & Happy Coding!


Sumber artikel ini dari blog heyriad