Video Tutorial:
I have a video version of this tutorial on my youtube channel. If you are interested do check out the video tutorial on my youtube channel. I post exciting tutorials on my youtube channel regularly. So do subscribe so you don’t miss any of it.
Project Folder Structure:
Before we move to the actual coding, let us take a look at the project folder structure. The project folder is called Diya Animation. Within this folder, we have two files- the first is index.html, and the second is style.css. The first one is an HTML document, while the second is the stylesheet.
HTML:
We have a main div with the class name container. Inside the container, we have three other divs with class- shadow,diya and inside. Diya consists of three divs- line-1, line-2 and dots. On the other hand, inside consists of light and flame.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Diya Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="shadow"></div>
<div class="diya">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="dots"></div>
</div>
<div class="inside">
<div class="light"></div>
<div class="flame"></div>
</div>
</div>
</body>
</html>
CSS:
We begin by removing the margins and paddings from all the elements. Next, we set the height of the body to 100vh and add a linear gradient to the body. Here we use solid stops for the gradient.
In the next step, we centre the container using the transforms and absolute positioning. We now start shaping the diya. We create a semicircle by setting the height of the diya exactly half as that of its width. In order to shape the corners, we use the border-radius property. Here it is important to set the overflow of diya to hidden.
For the inside, we use an ellipse shape and position it on the top of the diya. We create a similar shape for shadow and place it below diya. The colour of the shadow is slightly darker than that of its background.
We now create the flame. For flame, we first create a square shape with dimensions 170x170px and shape the corners with a border-radius. This creates a leaf-like shape. We rotate this shape by -45deg and place it right at the centre of the diya.
To more add details to the flame we use a pseudo-element to create a smaller version of flame and place it inside the flame div.
For light, we use the light element along with its before and after pseudo-elements. To create light we basically create circles of different opacity.Now we add decorations to the diya by adding a few lines and dots. These lines and dots are basically borders.
In the final step, we add animations and keyframes. We add a scale-up animation of the flame. This animation scales the flames by 1.05 every one second and scales it back down to the original size.
Even this shine animation basically scales up and down the lights but in addition to that, it also decreases the opacity of the light.
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(#190547 60%, #6031c0 60%);
}
.container {
height: 500px;
width: 500px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.diya {
height: 150px;
width: 300px;
background-color: #fdcf0f;
border-radius: 0 0 150px 150px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 50px;
overflow: hidden;
}
.inside {
width: 300px;
height: 60px;
background-color: #fd500a;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 170px;
}
.shadow {
height: 60px;
width: 320px;
background-color: rgba(25, 5, 71, 0.5);
position: absolute;
bottom: 30px;
border-radius: 50%;
margin: auto;
left: 0;
right: 0;
}
.flame {
height: 170px;
width: 170px;
background-color: #fdf1c2;
border-radius: 160px 0;
transform: rotate(-45deg);
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 36px;
animation: scale-up 2s infinite;
}
@keyframes scale-up {
50% {
transform: rotate(-45deg) scale(1.05);
bottom: 42px;
}
}
.flame:after {
content: "";
position: absolute;
height: 120px;
width: 120px;
background-color: #f4c631;
border-radius: 120px 0;
position: absolute;
bottom: 0;
}
.light {
height: 330px;
width: 330px;
background-color: rgba(253, 241, 194, 0.2);
border-radius: 50%;
position: absolute;
left: -15px;
bottom: 0;
}
.light:before,
.light:after {
content: "";
position: absolute;
height: 120px;
width: 120px;
background-color: rgba(253, 241, 194, 0.3);
border-radius: 50%;
animation: shine 5s linear infinite;
}
@keyframes shine {
50% {
transform: scale(0.7);
opacity: 0.2;
}
}
.light:before {
bottom: 30px;
right: 60px;
}
.light:after {
top: 50px;
left: 80px;
animation-delay: 1s;
}
.line-1,
.line-2 {
position: absolute;
height: 60px;
width: 320px;
border: none;
border-bottom: 8px solid #ffffff;
border-radius: 50%;
left: -10px;
}
.line-2 {
top: 60px;
}
.dots {
height: 60px;
width: 320px;
border: none;
border-bottom: 10px dotted #fd500a;
position: absolute;
border-radius: 50%;
top: 30px;
left: -10px;
}
That’s it for this tutorial. Our diya animation is now ready. If you have any problems while creating this you can download the source code by clicking on the download button below. Also if you have any suggestions or feedback do comment them below.
dddssdf