Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a Moon🌕 animation. To create this animation we will use HTML and CSS, No need to JavaScript. We do not make use of any images, icons or external libraries and plugins to create this animation.
As I have mentioned in my tutorials before, this kind of complicated animation hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.
This is a simple moon animation that brightens the night sky. It is created using HTML and CSS. No scripts are used in it. Although this animation is simple, there are many things to know about it, such as the CSS root element and the calculate element. These types of animations are used in loading pages or relaxing website backgrounds.
Project Folder Structure:
Before we start coding let us take a look at 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 while the second one is the stylesheet.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Moon🌕 Animation | Codehemu</title>
<link href="https://www.codehemu.com/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="moon">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
HTML Overall Structure
The main moon container of this moon animation is <div class="moon">...</div> element. Which includes the <li> tags, the <li> tag is usually used to create lists in HTML. But in this animation, <li> tags have been used to create holes on the moon. <link rel="stylesheet" href="style.css"> meaning all the visual styling and the "moon" animation logic will be defined within that separate CSS file. This HTML structure is a skeleton that you can link CSS (style.css file) to see this magic.
This animation works on all browsers, no need to moz and webkit (CSS).
StyleSheet (CSS):
Next, we style the elements created by HTML to give them shape and add animation using CSS. Now copy the code provided to you below and paste it into your stylesheet.
/* Create CSS root variables */
:root {
--sky-color: #3B4757; /* Dark blue-gray background for the "night sky" */
--moon-size: 200px;
--moon-color: #e1e9f3;
--moon-shadow-color: #abb6c1;
--moon-hole-color: #737277;
--moon-hole-shadow-color: #414043;
}
body {
margin: 0;
padding: 0;
background: var(--sky-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.moon {
position: relative;
width: var(--moon-size);
height: var(--moon-size);
background: var(--moon-color);
border-radius: 50%;
box-shadow: inset -25px 0px 0 0px var(--moon-shadow-color);
-webkit-backface-visibility: hidden;
/* Smooth transition for hover effect */
transition: transform 0.2s ease-in-out;
}
/* Pseudo-element for a subtle outer glow/atmosphere effect */
.moon:before {
content: '';
position: absolute;
left: -60px;
top: -60px;
right: -60px;
bottom: -60px;
border-radius: 50%;
background-image: linear-gradient(175deg, rgba(254, 254, 254, 0.2) 0%, rgba(256, 256, 256, 0) 100%);
z-index: 9;
}
/* Another pseudo-element for a stronger, closer outer glow/atmosphere effect */
.moon:after {
content: '';
position: absolute;
left: -30px;
top: -30px;
right: -30px;
bottom: -30px;
border-radius: 50%;
background-image: linear-gradient(175deg, rgba(254, 254, 254, 0.4) 0%, rgba(256, 256, 256, 0) 100%);
z-index: 9;
}
.moon:hover {
transform: scale(1.2);
}
li {
position: absolute;
list-style: none;
background: var(--moon-hole-color);
border-radius: 50%;
}
/* Individual crater positioning, sizing, and shadows to create depth */
li:nth-child(1) {
left: calc(var(--moon-size) * 0.125);
top: calc(var(--moon-size) * 0.3);
width: calc(var(--moon-size) * 0.25);
height: calc(var(--moon-size) * 0.25);
box-shadow: inset calc(var(--moon-size) * 0.03) -2px 0 0px var(--moon-hole-shadow-color);
}
li:nth-child(2) {
left: calc(var(--moon-size) * 0.75);
top: calc(var(--moon-size) * 0.25);
width: calc(var(--moon-size) * 0.125);
height: calc(var(--moon-size) * 0.125);
box-shadow: inset calc(var(--moon-size) * 0.015) -1px 0 0px var(--moon-hole-shadow-color);
}
li:nth-child(3) {
left: calc(var(--moon-size) * 0.5);
top: calc(var(--moon-size) * 0.75);
width: calc(var(--moon-size) * 0.125);
height: calc(var(--moon-size) * 0.125);
box-shadow: inset calc(var(--moon-size) * 0.015) -1px 0 0px var(--moon-hole-shadow-color);
}
li:nth-child(4) {
left: calc(var(--moon-size) * 0.25);
top: calc(var(--moon-size) * 0.75);
width: calc(var(--moon-size) * 0.0625);
height: calc(var(--moon-size) * 0.0625);
box-shadow: inset calc(var(--moon-size) * 0.012) -0.8px 0 0px var(--moon-hole-shadow-color);
}
li:nth-child(5) {
left: calc(var(--moon-size) * 0.4375);
top: calc(var(--moon-size) * 0.0825);
width: calc(var(--moon-size) * 0.0625);
height: calc(var(--moon-size) * 0.0625);
box-shadow: inset calc(var(--moon-size) * 0.012) -0.8px 0 0px var(--moon-hole-shadow-color);
}
li:nth-child(6) {
left: calc(var(--moon-size) * 0.57);
top: calc(var(--moon-size) * 0.4);
width: calc(var(--moon-size) * 0.0625);
height: calc(var(--moon-size) * 0.0625);
box-shadow: inset calc(var(--moon-size) * 0.012) -0.8px 0 0px var(--moon-hole-shadow-color);
}
li:nth-child(7) {
left: calc(var(--moon-size) * 0.905);
top: calc(var(--moon-size) * 0.5);
width: calc(var(--moon-size) * 0.0625);
height: calc(var(--moon-size) * 0.0625);
box-shadow: inset calc(var(--moon-size) * 0.012) -0.8px 0 0px var(--moon-hole-shadow-color);
}Visual Design (CSS)
At the beginning of the stylesheet, you will see the root element, which allows you to customize the entire moon animation. From here you can change the size and color of the moon. Now a question may come to your mind that if the size of the main moon container is changed, then the size of the moon holes will also have to be changed. Changing the size of all lunar craters with the changing size of the Moon is a problem, to solve this problem we will use the Calculate Element of CSS. With the help of an example, we will understand the matter.
The picture above clearly shows that if the size of the moon changes, the size of its craters will also change. We learned this type of math problem in our childhood.
That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!
Post a Comment