In today’s tutorial, we will learn how to create a moon and rocket animation. For this tutorial, all we need is HTML & CSS. Before we start with the tutorial, I would like you to know that this tutorial is only for fun. CSS art can help you with practising certain CSS properties like position, z-index, border-radius. So do give it a try if you are if want to improve your CSS skills. I have a whole playlist on these CSS arts and animations. Make sure you check them out here.
Video Tutorial:
If you would like to code along as I code, you can try the video tutorial below:
HTML:
We start by creating an HTML file – “index.html”. Copy the code below and paste it into the HTML file you have just created.
The div with the class name “container” wraps up all the elements. Also, this div is responsible for centring the entire CSS Art we will be creating.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rocket Animation</title>
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="moon">
<div class="crater crater-1"></div>
<div class="crater crater-2"></div>
<div class="crater crater-3"></div>
<div class="crater crater-4"></div>
<div class="crater crater-5"></div>
<div class="shadow"></div>
<div class="eye eye-l"></div>
<div class="eye eye-r"></div>
<div class="mouth"></div>
<div class="blush blush-1"></div>
<div class="blush blush-2"></div>
</div>
<div class="orbit">
<div class="rocket">
<div class="window"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
Next, create a CSS file with the name – ‘style.css’. Copy and paste the code below into your CSS file.
We start by adding a dark blue colour with the hex code “#151845” to the body. We centre the container on we “margin: auto” method. For the moon, we make the ‘border-radius’ 50% so as to make the moon circular. Next, We set overflow to hidden, to avoid the shadow to flow out of the moon div.
body{
background-color: #151845;
padding: 0;
margin: 0;
}
.container{
height: 370px;
width: 370px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.moon{
background-color: #39beff;
height: 170px;
width: 170px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
We create some circular craters and add shadows to them with the ‘before’ pseudo-class. We scale them each differently, to create craters of different shapes.
Now, it’s time to place the shadow. With overflow set to hidden on the ‘moon’ div, the ‘shadow’ div appears perfect.
.crater{
background-color: #31b4ff;
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
}
.crater:before{
content: "";
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
box-shadow: -5px 0 0 2px #1ca4f9;
top: 2px;
left: 7px;
}
.crater-1{
top: 27px;
left: 90px;
transform: scale(0.9);
}
.crater-2{
bottom: 15px;
left: 61px;
transform: scale(0.6);
}
.crater-3{
left: 15px;
transform: scale(0.75);
}
.crater-4{
left: 107px;
top: 32px;
transform: scale(1.18);
}
.crater-5{
left: 33px;
bottom: 4px;
transform: scale(0.65);
}
.shadow{
height: 190px;
width: 190px;
box-shadow: 21px 0 0 5px rgba(0,0,0,0.15);
border-radius: 50%;
position: relative;
bottom: 157.5px;
right: 46px;
}
Other tutorials you might like:
- 3D Flip Christmas Card | Pure CSS
- Single Div Pencil Animation
- Rainbow Border Animation With CSS
- Pure CSS Rotating Cube Animation
We style the eyes to look like two black circles. We position the relatively.
The ‘mouth’ div is shaped into a semicircle using the ‘border-radius’ property.
For the blush, we create two small circles and place them just below the eyes.
.eye{
height: 12px;
width: 12px;
background-color: #161616;
position: relative;
border-radius: 50%;
}
.eye-l{
bottom: 255px;
left: 59px;
}
.eye-r{
bottom: 267px;
left: 101px;
}
.mouth{
height: 5px;
width: 10px;
border: 3px solid #161616;
position: relative;
bottom: 262px;
left: 79px;
border-top: none;
border-radius: 0 0 10px 10px;
}
.blush{
height: 7.5px;
width: 7.5px;
background-color: #1ca4f9;
position: relative;
border-radius: 50%;
}
.blush-1{
bottom: 273px;
left: 50px;
}
.blush-2{
bottom: 281px;
left: 115px;
}
To make use of an as little number of divs as possible, we style different parts of the rocket using the ‘before’ and ‘after’ pseudo-class.
The ‘orbit’ div is a circle and the ‘rocket’ div is placed on the edge of this circle. We add animation to the ‘orbit’ so it rotates 360deg, linearly. This makes it look like the rocket is spinning around the moon in a circular path.
.orbit{
height: 280px;
width: 280px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
animation: spin 5s infinite linear;
}
@keyframes spin{
100%{
transform: rotate(360deg);
}
}
.rocket{
background-color: #fafcf7;
height: 50px;
width: 25px;
border-radius: 50% 50% 0 0;
position: relative;
left: -11px;
top: 115px;
}
.rocket:before{
position: absolute;
content: "";
background-color: #39beff;
height: 20px;
width: 55px;
z-index: -1;
border-radius: 50% 50% 0 0;
right: -15px;
bottom: 0;
}
.rocket:after{
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -4px;
left: 4.3px;
}
.window{
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
position: relative;
top: 17px;
left: 5px;
}
And that’s it. Your awesome CSS animation is now ready. You can try and experiment with the CSS properties and keyframes to make it look even cooler. If you have any suggestions, feedback or doubts, please comment on them below. You can download the code by click on the ‘Download Code’ button below. Also, check out my youtube channel for more such tutorials.
body{
background-color: #151845;
padding: 0;
margin: 0;
}
.container{
height: 370px;
width: 370px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.moon{
background-color: #39beff;
height: 170px;
width: 170px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.crater{
background-color: #31b4ff;
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
}
.crater:before{
content: “”;
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
box-shadow: -5px 0 0 2px #1ca4f9;
top: 2px;
left: 7px;
}
.crater-1{
top: 27px;
left: 90px;
transform: scale(0.9);
}
.crater-2{
bottom: 15px;
left: 61px;
transform: scale(0.6);
}
.crater-3{
left: 15px;
transform: scale(0.75);
}
.crater-4{
left: 107px;
top: 32px;
transform: scale(1.18);
}
.crater-5{
left: 33px;
bottom: 4px;
transform: scale(0.65);
}
.shadow{
height: 190px;
width: 190px;
box-shadow: 21px 0 0 5px rgba(0,0,0,0.15);
border-radius: 50%;
position: relative;
bottom: 157.5px;
right: 46px;
}
.eye{
height: 12px;
width: 12px;
background-color: #161616;
position: relative;
border-radius: 50%;
}
.eye-l{
bottom: 255px;
left: 59px;
}
.eye-r{
bottom: 267px;
left: 101px;
}
.mouth{
height: 5px;
width: 10px;
border: 3px solid #161616;
position: relative;
bottom: 262px;
left: 79px;
border-top: none;
border-radius: 0 0 10px 10px;
}
.blush{
height: 7.5px;
width: 7.5px;
background-color: #1ca4f9;
position: relative;
border-radius: 50%;
}
.blush-1{
bottom: 273px;
left: 50px;
}
.blush-2{
bottom: 281px;
left: 115px;
}
.orbit{
height: 280px;
width: 280px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
animation: spin 5s infinite linear;
}
@keyframes spin{
100%{
transform: rotate(360deg);
}
}
.rocket{
background-color: #fafcf7;
height: 50px;
width: 25px;
border-radius: 50% 50% 0 0;
position: relative;
left: -11px;
top: 115px;
}
.rocket:before{
position: absolute;
content: “”;
background-color: #39beff;
height: 20px;
width: 55px;
z-index: -1;
border-radius: 50% 50% 0 0;
right: -15px;
bottom: 0;
}
.rocket:after{
position: absolute;
content: “”;
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -4px;
left: 4.3px;
}
.window{
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
position: relative;
top: 17px;
left: 5px;
}
sorre