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 tutorials every alternate day. Along with these tutorials, I also post tips, tricks and multiple choice questions quizzes based on HTML, CSS and Javascript.
Project Folder Structure:
Before we move on to coding, let us take a look at the project folder structure. We create a project folder called – ‘Animated Diwali Wishes’. Within this folder, we have two files – index.html and style.css. The first file is an HTML document and 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. The HTML document contains a lot of divs with various class names. We use these elements to build the layout of our animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Diwali Wishes</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Courgette&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="wishes-container">
<div class="lights lights-1"></div>
<div class="lights lights-2"></div>
<div class="wishes">
<h3>Happy</h3>
<h3>Diwali</h3>
</div>
</div>
<div class="diya-container">
<div class="diya">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="dots"></div>
</div>
<div class="inside">
<div class="flame"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
Next, we style and position these elements by using CSS. To do this copy the code provided to you below and pasted it into your stylesheet. We style these elements to shape them into desired art. We also add animations and transforms using CSS.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #190547;
background-size: 3em 3em;
background-image: radial-gradient(
transparent 1.25em,
#3b2a62 1.25em,
#3b2a62 1.5em,
transparent 1.5em
),
radial-gradient(
transparent 1.25em,
#3b2a62 1.25em,
#3b2a62 1.5em,
transparent 1.5em
);
background-position: 0 0, 1.5em 1.5em;
}
.container {
height: 100vh;
width: 37.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
overflow: hidden;
}
.wishes-container {
width: 28.12em;
height: 28.12em;
background-color: #6031c0;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: calc(50% - 1.25em);
left: calc(50% - 1.25em);
box-shadow: 0 0 3.43em rgba(14, 2, 40, 0.7);
}
.lights {
height: 1.25em;
width: 1.25em;
background-color: #432286;
border-radius: 50%;
position: absolute;
}
.lights-1 {
left: 13.43em;
top: 1.25em;
box-shadow: 0 24.37em #432286, 11.87em 11.87em #432286,
-11.87em 11.87em #432286;
animation: lights-blink-1 2s infinite;
}
@keyframes lights-blink-1 {
49% {
background-color: #432286;
box-shadow: 0 24.37em #432286, 11.87em 11.87em #432286,
-11.87em 11.87em #432286;
}
50% {
background-color: #f4c631;
box-shadow: 0 24.37em #f4c631, 11.87em 11.87em #f4c631,
-11.87em 11.87em #f4c631;
}
100% {
background-color: #f4c631;
box-shadow: 0 24.37em #f4c631, 11.87em 11.87em #f4c631,
-11.87em 11.87em #f4c631;
}
}
.lights-2 {
left: 5.31em;
top: 5.31em;
box-shadow: 16.25em 0 #432286, 0 16.25em #432286, 16.25em 16.25em #432286;
animation: lights-blink-2 2s 1s infinite;
}
@keyframes lights-blink-2 {
49% {
background-color: #432286;
box-shadow: 16.25em 0 #432286, 0 16.25em #432286, 16.25em 16.25em #432286;
}
50% {
background-color: #f4c631;
box-shadow: 16.25em 0 #f4c631, 0 16.25em #f4c631, 16.25em 16.25em #f4c631;
}
100% {
background-color: #f4c631;
box-shadow: 16.25em 0 #f4c631, 0 16.25em #f4c631, 16.25em 16.25em #f4c631;
}
}
.wishes {
height: 100%;
width: 100%;
color: #ffffff;
font-family: "Courgette", cursive;
font-size: 3.75em;
line-height: 1.6em;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transform: scale(0);
transform-origin: 50% 50%;
animation: wishes-scale-up 2s 3s forwards;
}
@keyframes wishes-scale-up {
100% {
transform: scale(1);
}
}
.diya-container {
height: 25em;
width: 25em;
position: absolute;
transform: translate(-50%, -50%);
top: calc(50% + 37.5em);
left: calc(50% + 9.37em);
animation: diya 3s forwards;
}
@keyframes diya {
100% {
top: calc(50% + 4.68em);
}
}
.diya {
height: 9.37em;
width: 18.37em;
background-color: #e53760;
border-radius: 0 0 9.37em 9.37em;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
box-shadow: 0 0 2.18em rgba(14, 2, 40, 0.4);
}
.inside {
width: 18.75em;
height: 3.75em;
background-color: #79182f;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 7.5em;
}
.flame {
height: 10.62em;
width: 10.62em;
background-color: #fdf1c2;
border-radius: 10em 0;
transform: rotate(-45deg);
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 2.25em;
animation: scale-up 2s infinite;
}
@keyframes scale-up {
50% {
transform: rotate(-45deg) scale(1.05);
bottom: 2.62em;
}
}
.flame:after {
content: "";
position: absolute;
height: 7.5em;
width: 7.5em;
background-color: #f4c631;
border-radius: 7.5em 0;
position: absolute;
bottom: 0;
}
.line-1,
.line-2 {
position: absolute;
height: 3.75em;
width: 20em;
border: none;
border-bottom: 0.5em solid #ffffff;
border-radius: 50%;
left: -0.62em;
}
.line-2 {
top: 3.75em;
}
.dots {
position: absolute;
height: 3.75em;
width: 20em;
border: none;
border-bottom: 0.62em dotted #f4c631;
border-radius: 50%;
top: 1.87em;
left: -0.62em;
}
@media screen and (max-width: 600px) {
.container {
font-size: 12px;
}
}
That’s it for this tutorial. Your animated Diwali wishes are now ready. You can now go ahead and customize it the way you like. To do so you can experiment with keyframes, transform origin, animation duration, animation delay, colours and much more.
If you face any issues while creating this code, you can download the source code by clicking on the ‘Download code’ button below. Also, if you have any queries, suggestions or feedback you can comment on them below.
Happy Coding!
