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.. 🤣🤣
2 Comments
good info.. ejulz share k.. :)
ReplyDeletemaaf, whatsapp saya backup dan semua chat hilang. Boleh contact saya semula di 0132035062
ReplyDeleteTerima kasih sudi baca artikel ini. Sila berikan komen anda. Jemput follow blog ini ye!