Making Flying Rocket Animation Using HTML and CSS.|||||
copy html code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rocket Animation</title>
</head>
<body>
<div id="animation">
<div class="rocket">
<img src="rocket.png" alt="">
</div>
</div>
</body>
</html>
copy css code:
body{
background-image: url(stars.gif);
background-color: black;
}
.rocket{
position: relative;
margin-top: 170px;
margin-left: 500px;
animation: animate 0.2s ease infinite;
}
@keyframes animate{
0%,100%{
transform: translateY(-6px);
}
50%{
transform: translateY(6px);
}
}
stars gif and rocket image:
This website is very useful
ReplyDelete