Happy Diwali HTML and CSS Code Wish (Happy Diwali Animation Code )
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.
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
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.
Html Code For Happy Diwali
<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>
We’ll make the container’s title, add the title “Happy Diwali,” and add the diyas using the ul tag to the div tag with the class “container” that we’ll use to create the container. Using the span> tag, we will produce a list entry. We’ll designate distinct sections for the diyas.
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.
Portfolio Website using HTML and CSS (Source Code)
Only HTML Code Output For Diwali Wish
Css Code For Happy Diwali:
@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); } }
Step1: We’ll use the import link to add the Google Font “sacramento,” set the backdrop color to black, and change the font-family property to “sacramento” at the same time.
Restaurant Website Using HTML and CSS
We’ll assign the dimensions to 200 px and 600 px using the class selector “.container,” and the position will be fixed. We’ll set the padding and border to “Zero” using those two elements.
@import url('https://fonts.googleapis.com/css?family=Sacramento'); $mattBlack:#212121; body { background-color: $mattBlack; font-family: 'Sacramento', cursive; } .container { height: 200px; width: 600px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; .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); } }
Step2:Now, using the list-type property, we will style the pyrotechnics. We’ll choose “none” as the list category. The margin and padding are set to 20 px and 50 px, respectively, and we’ll add 500 px using the border-radius attribute.
We will configure the display as an inline block using the li element selector. We’ll build the Puesdo elements before and after and set the width to “100%.” We’ll change the background to $mattblack using the background property.
.fireworks { list-style-type: none; padding: 0; 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); &::before { content: ""; position: absolute; height: 100%; background-color: $mattBlack; width: 100%; border-radius: 500px; top: -40%; left: -30%; } &::after { content: ""; position: absolute; height: 100%; background-color: $mattBlack; width: 100%; border-radius: 500px; top: -40%; right: -30%; } 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; } } @for $i from 1 through 6 { li:nth-child(#{$i}) { span { animation-delay:#{$i*0.5}s; } } } } @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); } }
50+ HTML, CSS & JavaScript Projects With Source Code
Now we have completed our CSS Code Section For Diwali Animation Wish. Here is our updated output With HTML and CSS Code.
Final output Happy Diwali Using HTML and CSS Code Wish
Video Output:
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
Which code editor do you use for this Diwali Animation coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
What is an animation?
An element progressively transitions from one style to another through animation. As many assets as you like can be added. The adjustments can also be specified in percentages. 0% and 100% respectively indicate the beginning and end of the animation.
What are the properties required for the rainbow text animation?
Some Important properties required for rainbow text animation are gradient colour property,animation,keyframes these are some main properties required for rainbow text animation