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

Terima kasih sudi baca entry Zati.
Komen yang baik-baik ye!

Budi Bahasa , Budaya Kita

Total Pageviews

Instagram

Recent Comments

Top Commentators