Posted By
Bajarangi soft ,
Posted On 27-11-2020
Complete Code For Creating Shaking Image On Mouse Hover Using CSS.
<!DOCTYPE html>
<html>
<head>
<title>How To Create Shaking Image On Mouse Hover Using CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body{
background: black;
}
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>
<body>
<br/><br/>
<div class="container">
<br>
<div class="text-center">
<h1 id="color" style="color: white;">Create Shaking Image On Mouse Hover Using CSS</h1>
</div>
<br><br><br>
<div class="well">
<img src="https://cdn.hipwallpaper.com/i/66/67/wsj173.jpg" alt="Pineapple" width="300" height="300">
</div>
</div>
</body>
</html>