Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel where I post new tips, tricks, and tutorials related to web development regularly.
Project Folder Structure:
Before we start coding, let us create the project folder structure. We begin by creating a project folder called- ‘Day Night Animation’. Inside these folders, 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. HTML code is used to create elements that build the structure of our animation. 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>Day Night Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="glow"></div>
<div class="stars"></div>
<div class="spinner">
<div class="sun">
<div class="ray1"></div>
<div class="ray2"></div>
<div class="ray3"></div>
<div class="ray4"></div>
</div>
<div class="moon"></div>
</div>
</div>
</body>
</html>
CSS:
Now we style and shape the elements created with HTML into desired shapes using CSS. We also use CSS to position these elements and add animations. Now copy the code provided to you below and paste it into your stylesheet.
body {
padding: 0;
margin: 0;
background-color: #0c1330;
}
.container {
height: 25em;
width: 16.8em;
background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
overflow: hidden;
border-radius: 16.8em;
animation: colors 12s infinite forwards;
}
@keyframes colors {
10% {
background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
}
53% {
background: linear-gradient(#14045f, #331a99, #282bce, #1555ec, #1e84f7);
}
55% {
background: linear-gradient(#14045f, #331a99, #282bce, #1555ec, #1e84f7);
}
98% {
background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
}
100% {
background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
}
}
.spinner {
height: 28.12em;
width: 28.12em;
border-radius: 50%;
position: absolute;
top: 8.75em;
left: -5.62em;
animation: spin 12s infinite forwards;
}
@keyframes spin {
10% {
transform: rotate(0deg);
}
45% {
transform: rotate(180deg);
}
55% {
transform: rotate(180deg);
}
90% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
.sun {
background-color: #f7f7de;
height: 3.75em;
width: 3.75em;
border-radius: 50%;
position: absolute;
left: 12.18em;
top: -1.87em;
}
.sun:before,
.sun:after {
position: absolute;
content: "";
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.sun:before {
height: 7.5em;
width: 7.5em;
right: -1.87em;
bottom: -1.87em;
}
.sun:after {
height: 12.5em;
width: 12.5em;
right: -4.37em;
bottom: -4.37em;
}
.ray1 {
height: 0;
width: 0.6em;
border-bottom: 10.6em solid rgba(255, 255, 255, 0.1);
border-left: 1.8em solid transparent;
border-right: 1.8em solid transparent;
position: absolute;
transform: rotate(130deg);
bottom: 0.6em;
right: 4em;
}
.ray2 {
position: absolute;
height: 0;
width: 0.9em;
border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
border-left: 2.1em solid transparent;
border-right: 2.1em solid transparent;
transform: rotate(230deg);
left: 3.75em;
bottom: -0.3em;
}
.ray3 {
position: absolute;
height: 0;
width: 0.3em;
border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
border-left: 0.9em solid transparent;
border-right: 0.9em solid transparent;
transform: rotate(80deg);
left: -5.3em;
bottom: -5.6em;
}
.ray4 {
position: absolute;
height: 0;
width: 0.1em;
border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
transform: rotate(280deg);
left: 7.5em;
bottom: -5.6em;
}
.moon {
height: 3.75em;
width: 3.75em;
box-shadow: 1.25em -1.25em 0 0 #f7f7de;
border-radius: 50%;
position: absolute;
bottom: -3.1em;
left: 10.93em;
}
.moon:before,
.moon:after {
position: absolute;
content: "";
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.moon:before {
height: 6.25em;
width: 6.25em;
right: -2.5em;
bottom: 0;
}
.moon:after {
height: 11.8em;
width: 11.8em;
left: -2.8em;
bottom: -2.8em;
}
.stars {
height: 0.15em;
width: 0.15em;
background-color: #ffffff;
position: absolute;
top: 3.7em;
left: 9.3em;
border-radius: 50%;
box-shadow: 3em 9.3em #ffffff, -1.8em 11.2em #ffffff, 2.5em 16.2em #ffffff,
-5em 6.2em #ffffff, -5.6em -0.6em #ffffff, -5.6em 3.7em 0 0.06em #ffffff,
-5em 17.5em 0 0.05em #ffffff, -7.5em 14.3em #ffffff;
animation: twinkle 12s infinite forwards;
}
@keyframes twinkle {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
53% {
opacity: 0.7;
}
55% {
opacity: 0.7;
}
98% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.glow {
height: 21.8em;
width: 21.8em;
position: absolute;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 50%;
bottom: -19em;
animation: float 5s infinite;
}
@keyframes float {
50% {
transform: translateY(0.75em);
}
}
.glow:before,
.glow:after {
position: absolute;
content: "";
height: 100%;
width: 100%;
background-color: inherit;
border-radius: 50%;
}
.glow:before {
left: -9.3em;
top: -3.1em;
}
.glow:after {
right: -5.6em;
top: -0.8em;
}
@media screen and (min-width: 600px) {
.container {
font-size: 20px;
}
}
That’s it for this tutorial. Our day-night animation is now ready.
If you face any issues while creating this animation, 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 drop them in the comments below.
Happy Coding!
