07 March 2022

Membuat Gambar Bergetar Saat Disentuh Mouse

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Membuat Gambar Bergetar Saat Disentuh Mouse

Gambar bergetar atau gambar bergoyang pada blog merupakan trik unik dan asyik yang bisa digunakan untuk mempercantik blog. Karena dengan trik ini semua gambar yang ada pada blog akan menjadi bergetar.

Uniknya lagi, pembuatan gambar bergetar ini tidak memakai javascript yang berlebihan. Tapi hanya menggunakan kode CSS untuk membuatnya, sehingga tidak terlalu memberatkan blog.

Kode yang tersemat pada trik ini juga terbilang simple. Pemakaian keyframes menjadi hal mutlak, karena sedikit banyak trik ini mengingatkan kita pada animasi gambar bergerak.

Baca Juga : Membuat Slideshow Gambar dengan CSS dan HTML

Menjadikan sebuah blog menjadi unik dan menarik dapat dengan berbagai cara, dan salah satunya adalah dengan cara yang sedang kita bahas ini. Membubuhkan kode animasi getar dengan CSS.

Membuat Gambar Bergetar Saat Disentuh Mouse

Untuk membuat gambar bergetar adalah sebagai berikut :

Setelah menuju Dashboard Blogger, kemudian pilih Tema, lalu klik Sesuaikan : Edit HTML. Cari kode ]]></b:skin> yang letaknya di dalam template blog kalian. Tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut.

.post-body img{
  display: inherit;
  transform-origin: center center; }
  img:hover img{ animation-play-state: running; }
@keyframes img {
  20% { transform: translate(-1px, -5px) rotate(2.5deg); }
  40% { transform: translate(5px, 1px) rotate(-2.5deg); }
  60% { transform: translate(-1px, -5px) rotate(2.5deg); }
  80% { transform: translate(5px, 1px) rotate(-2.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); } }
img:hover{
  animation-name: img;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}


Setelah itu save dan refresh halaman blog kamu. Dan sentuh gambar yang ada di postingan. Biasanya gambar ini letaknya paling atas dari artikel karena biasanya digunakan sebagai thumbnail pada halaman homepage blog. Sudah jadi bergetar bukan ?

Terima kasih sudah mau membaca artikel Membuat Gambar Bergetar Saat Disentuh Mouse. Semoga bermanfaat dan bisa dicoba ya di blog kamu. Terima kasih. Sampai jumpa lain waktu dengan artikel yang berbeda. Wassalam.



Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Gambar Bergetar Saat Disentuh Mouse . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon