Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create an astronaut animation. To create this animation we need HTML and CSS.
We do not use images, icons or any external libraries to build this animation. Even though this is a fun tutorial, you can learn and practice many important CSS properties through this tutorial. So I would suggest CSS beginners give this tutorial a try.
If you would like to improve your CSS skills through more tutorials like this one, you can out this playlist here. This playlist consists of a bunch of CSS animation tutorials that will help you upgrade your CSS knowledge.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out this video down below. Also, subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – ‘Astronaut Animation’. Inside this folder, we have two files – index.html and style.css. These are the HTML document and the stylesheet.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document. The HTML code creates elements that form the structure of our illustration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astronaut Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="stars"></div>
<div class="planet">
<div class="shadow"></div>
</div>
<div class="astronaut">
<div class="tank center"></div>
<div class="suit center">
<div class="helmet center"></div>
<div class="buttons center"></div>
<div class="hand-l"></div>
<div class="hand-r"></div>
<div class="leg-l"></div>
<div class="leg-r"></div>
<div class="pipe"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
We shape these elements to form the desired art using CSS. We also use CSS to animate this illustration. Now copy the code provided to you below and paste it into your stylesheet.
body {
padding: 0;
margin: 0;
background-color: #171640;
}
.container {
position: absolute;
height: 31.25em;
width: 31.25em;
background-color: rgba(255, 255, 255, 0.05);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 50%;
}
.center {
transform: translateX(-50%);
left: 50%;
}
.planet {
height: 12.5em;
width: 12.5em;
background-color: #f5d201;
border-radius: 50%;
position: absolute;
top: 2.81em;
left: 13.75em;
}
.planet:before {
position: absolute;
content: "";
background-color: #fcec8e;
height: 1.25em;
width: 6.87em;
border-radius: 0.62em;
top: 3em;
left: 4.25em;
box-shadow: 1.42em 3.65em 0 -0.25em #fcec8e, -1.25em 4.75em 0 0.12em #fcec8e;
}
.planet:after {
position: absolute;
content: "";
background-color: #edb514;
height: 0.75em;
width: 2.5em;
border-radius: 0.46em;
top: 1.87em;
left: 3em;
box-shadow: -1.25em 3.75em 0 0.37em #edb514, 4.06em 8.43em 0 0.12em #edb514;
}
.shadow {
position: absolute;
background-color: transparent;
box-shadow: 0.93em 0.93em rgba(134, 123, 5, 0.3);
height: 12.5em;
width: 12.5em;
border-radius: 50%;
bottom: 0.93em;
right: 0.93em;
}
.astronaut {
position: absolute;
height: 17.5em;
width: 15.62em;
top: 7.5em;
left: 6.25em;
transform: rotate(-30deg);
animation: float 5s infinite;
}
@keyframes float {
50% {
transform: rotate(-30deg) translateY(1.87em);
}
}
.suit {
position: absolute;
background-color: #e2e9f4;
height: 6.25em;
width: 6.25em;
border-radius: 10%;
top: 5.5em;
}
.helmet {
background-color: #e2e9f4;
height: 5.81em;
width: 6.25em;
position: absolute;
top: -5.43em;
border-radius: 45%;
}
.helmet:before {
position: absolute;
content: "";
background-color: #64c1f7;
height: 3.75em;
width: 5em;
border-radius: 60% 60% 40% 40%;
left: 0.62em;
top: 0.43em;
}
.helmet:after {
content: "";
position: absolute;
background-color: rgba(255, 255, 255, 0.3);
height: 0.93em;
width: 0.93em;
border-radius: 50%;
left: 1.25em;
top: 1.56em;
}
.tank {
position: absolute;
background-color: #aec3d2;
height: 7.5em;
width: 7.5em;
top: 5em;
border-radius: 0.62em;
}
.buttons {
background-color: #bdd3f3;
width: 3.43em;
height: 1.87em;
border-radius: 0.5em;
position: absolute;
top: 1.56em;
}
.buttons:after {
position: absolute;
content: "";
height: 0.75em;
width: 0.75em;
background-color: #1683ed;
border-radius: 50%;
top: 0.62em;
left: 0.25em;
box-shadow: 1.12em 0 #fbd31f, 2.25em 0 #e62c1b;
}
.buttons:before {
position: absolute;
content: "";
height: 1.25em;
width: 1.25em;
border-radius: 50%;
background-color: #aec3d2;
top: 2.5em;
left: 1.12em;
}
.hand-l,
.hand-r {
position: absolute;
height: 1.62em;
width: 4.68em;
background-color: #e2e9f4;
border-radius: 2.5em;
top: -0.62em;
}
.hand-l {
transform: rotate(20deg);
left: -3.12em;
}
.hand-r {
transform: rotate(-20deg);
right: -3.12em;
}
.hand-l:before,
.hand-r:before {
position: absolute;
content: "";
height: 1.62em;
width: 4.81em;
background-color: #e2e9f4;
border-radius: 1.62em;
bottom: 1.62em;
}
.hand-l:before {
right: 1.87em;
transform: rotate(-90deg);
}
.hand-r:before {
left: 1.87em;
transform: rotate(90deg);
}
.hand-l:after,
.hand-r:after {
position: absolute;
content: "";
background-color: #e62c1b;
height: 0.34em;
width: 1.75em;
border-radius: 0.81em;
top: -1.56em;
}
.hand-l:after {
left: -0.43em;
}
.hand-r:after {
right: -0.43em;
}
.leg-l,
.leg-r {
height: 6.25em;
width: 2.5em;
background-color: #e2e9f4;
position: absolute;
top: 5em;
}
.leg-l {
left: -0.75em;
transform: rotate(20deg);
}
.leg-r {
right: -0.75em;
transform: rotate(-20deg);
}
.leg-l:before,
.leg-r:before {
position: absolute;
content: "";
background-color: #ffffff;
width: 2.68em;
height: 2.18em;
border-radius: 50% 50% 0 0;
top: 4.06em;
left: -0.09em;
}
.leg-l:after,
.leg-r:after {
position: absolute;
content: "";
background-color: #e62c1b;
width: 2.81em;
height: 0.31em;
border-radius: 1em;
bottom: -0.09em;
left: -0.15em;
}
.pipe {
position: absolute;
background-color: transparent;
height: 2.5em;
width: 6.25em;
border: 0.62em solid #3cb9f0;
border-top: none;
border-radius: 0 0 3.75em 1.87em;
left: 2.81em;
top: 4.5em;
}
.pipe:before {
position: absolute;
content: "";
background-color: transparent;
height: 2.5em;
width: 2.81em;
border: 0.62em solid #3cb9f0;
border-left: none;
border-bottom: none;
top: -3.1em;
left: 3.42em;
border-radius: 0 2.5em 0 0;
}
.stars {
position: absolute;
background-color: #ffffff;
width: 0.31em;
height: 0.31em;
border-radius: 50%;
top: 9.37em;
left: 3.75em;
box-shadow: 4.37em 9.37em #ffffff, 5.62em -6.25em #ffffff,
17.5em 15.62em #ffffff, 23.75em 7.5em #ffffff, 3.75em 16.25em #ffffff;
animation: twinkle 3s infinite;
}
@keyframes twinkle {
50% {
opacity: 0.2;
}
}
@media screen and (min-width: 700px) {
.container {
font-size: 20px;
}
}
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys, so if you have any queries, suggestions or feedback you can comment below.
Happy Coding!
