You are currently viewing Happy Diwali HTML & CSS Code Wish | Diwali Animation CSS

Happy Diwali HTML & CSS Code Wish | Diwali Animation CSS

Happy Diwali HTML & CSS Code Wish | Diwali Animation CSS

Happy Diwali HTML & CSS Code Wish | Diwali Animation CSS
Happy Diwali HTML & CSS Code Wish | Diwali Animation CSS

 

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.

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>

There is all the HTML Code for the Diwali Wish. Now, you can see output without CSS. then we write CSS Code for Diwali wish With Animation.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Only HTML Code Output For Diwali Wish

 

Happy Diwali HTML & CSS Code Wish
Happy Diwali Html Code

 

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);
}
}

Now we have completed our CSS Code Section For Diwali Animation Wish. Here is our updated output With HTML and CSS Code.

50+ Html ,Css & Javascript Projects With Source Code

Final output Happy Diwali HTML & CSS Code Wish

 

Hope you like the Happy Diwali wish Using HTML and CSS Code. You Can See the Output video and project screenshots Of Diwali’s wish. See our other blogs and gain knowledge in front-end development.

Portfolio Website Using HTML ,CSS and Javascript Source Code

Thank you

In this post, we learn how to create a Happy Diwali Wish using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

 

Leave a Reply