TUTORIAL : Image Bergegar

Klik untuk Preview → View

1. Dashboard → Layout / Post → HTML
2. Copy / Paste coding bawah ni

<style>
img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 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(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
</head>
<body>

<p>Hover over the image:</p>
<img src="https://giant.gfycat.com/FaroffAcclaimedGar.gif" alt="Doraemon" width="300" height="300">

</body>

3. Korang letak lah gambar apa pun.haha
4. Kat bawah ni korang boleh tengok browser mana yang support untuk transforms ni


5. Dah selesai save je. Dah jangan suka sangat dok gegar doraemon tu.. 🤣🤣

3 Comments

  1. good info.. ejulz share k.. :)

    ReplyDelete
  2. maaf, whatsapp saya backup dan semua chat hilang. Boleh contact saya semula di 0132035062

    ReplyDelete