CSS
CSS - 이미지 둥둥 떠있도록(발자국 - 지도 앱 업체)
Starters
2020. 8. 19. 17:42
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
animation: shake 1s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(0px, 4px) rotate(0deg); }
50% { transform: translate(0px, 0px) rotate(0deg); }
100% { transform: translate(0px, 4px) rotate(0deg); }
}
</style>
</head>
<body>
<p>Hover over the image:</p>
<img src="https://www.w3schools.com/howto/pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>