Wednesday, August 8, 2018

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.. 🤣🤣
at

3 comments:

  1. Rabiahtul AdawiyahAugust 8, 2018 at 6:41 PM

    tq for sharing kak

    ReplyDelete
  2. ejulzAugust 8, 2018 at 7:34 PM

    good info.. ejulz share k.. :)

    ReplyDelete
  3. The FoolAugust 10, 2018 at 7:50 PM

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

    ReplyDelete