Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a stunning moon animation. To build this animation, we need HTML and CSS. We do not use any images, icons or external libraries to create this animation project.
This is a fun tutorial. You may barely find yourself using such animations in real-world projects. The only purpose of creating these animations is to practice and explore various CSS properties in a fun way. So if you are a CSS beginner looking to improve your CSS skills then you should go for this tutorial.
If you are looking for more such tutorials to improve your CSS skills you should check out this playlist here. This playlist consists of a bunch of CSS animations that will help you experiment with a lot of CSS properties.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, check out the video down below. Also, if you like the video subscribe to my youtube channel, where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us create the project folder structure. We create a project folder called – ‘Moon Animation’. Inside this folder, we have two files. These files are index.html and style.css. The first file is the HTML document, whereas the second one is the stylesheet.
HTML:
We begin with the HTML code. With HTML, we create elements which will be later shaped into various parts of our art. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Moon Animation</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<p class="letter letter-M">M</p>
<div class="moon">
<div class="orbit">
<p>O</p>
</div>
</div>
<p class="letter letter-N">N</p>
</div>
</body>
</html>
CSS:
Next, we style the elements that we have created with HTML. This styling includes positioning and shaping these elements to create the desired illustration. We also use CSS to animate the illustration we have created.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
background-color: #21233c;
}
.container {
height: 31.25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
color: #ffffff;
}
p.letter {
font-size: 3.5em;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.letter-M {
left: 0.2em;
}
.letter-N {
right: 0.2em;
}
.moon {
background-color: #f5f5f5;
height: 8em;
width: 8em;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-shadow: 0 0 0 0.6em rgba(255, 255, 255, 0.05),
0 0 0 1.2em rgba(255, 255, 255, 0.05), 0 0 0 1.8em rgba(255, 255, 255, 0.05);
}
.moon:after {
position: absolute;
content: "";
background-color: #e6e6e6;
height: 0.9em;
width: 0.9em;
border-radius: 50%;
top: 3.75em;
left: 1.25em;
box-shadow: 0.9em -2.1em 0 0.2em #e6e6e6, 1.5em -0.3em 0 -0.06em #e6e6e6;
}
.orbit {
height: 18.75em;
width: 18.75em;
border-radius: 50%;
position: absolute;
left: -5.2em;
bottom: -5.2em;
animation: spin 8s infinite linear;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.orbit p {
position: absolute;
font-size: 3.5em;
top: 0.25em;
left: 0.25em;
}
@media screen and (min-width: 700px) {
.container {
font-size: 20px;
}
}
That’s it for this tutorial. If you face any issues while creating this project, you can download the source code by clicking on the ‘Download Button’ below.
Also, I would love to hear from you guys so comment below with your queries, suggestions, and feedback.
