Happy Diwali HTML & CSS Code Wish | Happy Diwali Coding

Welcome to The Codewithrandom blog. 1st of all Happy Diwali to everyone who reads this blog post, and thanks to you for being part of the codewithrandom blog. So let’s start our Diwali wishes but not in the text, we are HTML developers so We wish Happy Diwali in pure HTML and CSS Code With Diwali Animation.

Code by	N/A
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	No
Responsive	No

So first we start with our HTML Code structure For Diwali Wish.

Happy Diwali Html Code

<div class="container">
<div class="title">Happy Diwali from codewithrandom</div>
<ul class="fireworks">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>

 

Diwali Animation Css Code

@import url('https://fonts.googleapis.com/css?family=Sacramento');
body {
background-color: #212121;
font-family: 'Sacramento', cursive;
}
.container {
height: 200px;
width: 600px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.container .title {
font-size: 5rem;
color: rgba(255, 255, 255, 0.5);
text-align: center;
text-shadow: 0px 2px 1px orange, 0px 0px 6px orangered, 0px 5px 10px rgba(0, 0, 0, 1);
}
.fireworks {
list-style-type: none;
padding: 0;
}
.fireworks li {
display: inline-block;
margin: 20px;
height: 50px;
width: 50px;
border-radius: 500px;
position: relative;
background-color: #8d6e63;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.fireworks li::before {
content: "";
position: absolute;
height: 100%;
background-color: #212121;
width: 100%;
border-radius: 500px;
top: -40%;
left: -30%;
}
.fireworks li::after {
content: "";
position: absolute;
height: 100%;
background-color: #212121;
width: 100%;
border-radius: 500px;
top: -40%;
right: -30%;
}
.fireworks li span {
display: inline-block;
height: 20px;
width: 20px;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 1;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
transform: rotate(45deg);
animation: fire 0.3s ease infinite;
}
.fireworks li:nth-child(1) span {
animation-delay: 0.5s;
}
.fireworks li:nth-child(2) span {
animation-delay: 1s;
}
.fireworks li:nth-child(3) span {
animation-delay: 1.5s;
}
.fireworks li:nth-child(4) span {
animation-delay: 2s;
}
.fireworks li:nth-child(5) span {
animation-delay: 2.5s;
}
.fireworks li:nth-child(6) span {
animation-delay: 3s;
}
@keyframes fire {
0%, 100% {
transform: rotate(55deg);
width: 20px;
background: linear-gradient(90deg, orange, orangered);
}
50% {
transform: rotate(35deg);
width: 18px;
background: linear-gradient(90deg, orangered, orange);
}
}