- Get link
- Other Apps
1) Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>How To Shake an Image By BK Tutorial</title>
</head>
<body>
<h2> Shake an Image By BK Tutorial </h2>
<center>
<img src="BKTutorial.jpg" alt="BK Tutorial">
</center>
</body>
</html>
2) Style.css
h2{
color:#fff;
font-family:Calibri;
font-size:30px;
font-weight:600;
letter-spacing:2px;
text-align:center;
text-shadow:3px 0px 8px #000;
}
img{
width:250px;
height:250px;
}
img:hover {
animation: shakeit 1s infinite linear;
}
@keyframes shakeit {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-2px, -3px) rotate(-1deg); }
20% { transform: translate(-4px, 0px) rotate(1deg); }
30% { transform: translate(4px, 1px) rotate(0deg); }
40% { transform: translate(1px, -2px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-10deg); }
60% { transform: translate(-4px, 2px) rotate(0deg); }
70% { transform: translate(4px, 2px) rotate(-10deg); }
80% { transform: translate(-2px, -3px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, 100px) rotate(-1deg); }
}
Output:
Comments
Post a Comment
If you any Query and get more information please comment it. Thanks for visit our blog.