Telegram Group Join Now
Fireworks Animation Using CSS
Welcome to Code With Random blog. We learn how to create a Fireworks Animation. We use HTML and CSS for Fireworks Animation.
A CSS effect called fireworks animation is just something we make with CSS principles. With the aid of CSS, we can add fire flames to fireworks animation, which look gorgeous and give the display a genuine appearance.
50+ HTML, CSS & JavaScript Projects With Source Code
ADVERTISEMENT
I hope you enjoy our blog so let’s start with a basic HTML structure for the Fireworks Animation.
Code by | Alvaro Montoro |
Project Download | Link Available Below |
Language used | HTML and CSS |
External link / Dependencies | NO |
Responsive | YES |
Html Code For Fireworks Animation
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fireworks Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="firework"></div> <div class="firework"></div> <div class="firework"></div> </body> </html>
Structure for our firework animations:
To add structure, we’ll only use the div element to make three containers, and then we’ll use CSS to make fireworks using these containers. To allay your concerns and assist in comprehending the CSS ideas, we will be introducing the fireworks animation step by step.
There is all HTML code for the Fireworks Animation. Now, you can see output without CSS, then we write CSS for the Fireworks Animation.
Portfolio Website using HTML and CSS (Source Code)
Output
10+ Javascript Projects For Beginners With Source Code
CSS Code For Fireworks Animation
body { background: linear-gradient(#0007, #0000), #123; margin: 0; height: 100vh; overflow: hidden; } @keyframes firework { 0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; } 50% { width: 0.5vmin; opacity: 1; } 100% { width: var(--finalSize); opacity: 0; } } /* @keyframes fireworkPseudo { 0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; } 50% { width: 0.5vmin; opacity: 1; } 100% { width: var(--finalSize); opacity: 0; } } */ .firework, .firework::before, .firework::after { --initialSize: 0.5vmin; --finalSize: 45vmin; --particleSize: 0.2vmin; --color1: yellow; --color2: khaki; --color3: white; --color4: lime; --color5: gold; --color6: mediumseagreen; --y: -30vmin; --x: -50%; --initialY: 60vmin; content: ""; animation: firework 2s infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, var(--y)); width: var(--initialSize); aspect-ratio: 1; background: /* radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%, */ radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%, /* bottom right */ radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%, /* bottom left */ radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%, /* top left */ radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%, /* top right */ radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42% ; background-size: var(--initialSize) var(--initialSize); background-repeat: no-repeat; } .firework::before { --x: -50%; --y: -50%; --initialY: -50%; /* transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */ transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg); /* animation: fireworkPseudo 2s infinite; */ } .firework::after { --x: -50%; --y: -50%; --initialY: -50%; /* transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */ transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); /* animation: fireworkPseudo 2s infinite; */ } .firework:nth-child(2) { --x: 30vmin; } .firework:nth-child(2), .firework:nth-child(2)::before, .firework:nth-child(2)::after { --color1: pink; --color2: violet; --color3: fuchsia; --color4: orchid; --color5: plum; --color6: lavender; --finalSize: 40vmin; left: 30%; top: 60%; animation-delay: -0.25s; } .firework:nth-child(3) { --x: -30vmin; --y: -50vmin; } .firework:nth-child(3), .firework:nth-child(3)::before, .firework:nth-child(3)::after { --color1: cyan; --color2: lightcyan; --color3: lightblue; --color4: PaleTurquoise; --color5: SkyBlue; --color6: lavender; --finalSize: 35vmin; left: 70%; top: 60%; animation-delay: -0.4s; }
Step1:We will give our app some fundamental styling using the body tag selector. We’ll add a blue and black linear gradient backdrop using the background property, and the margin is set to “zero.”
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Now, we’ll alter the opacity from 1 to 0 using the “firework” keyframes at three intervals of 0, 50%, and 100%.
body { background: linear-gradient(#0007, #0000), #123; margin: 0; height: 100vh; overflow: hidden; } @keyframes firework { 0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; } 50% { width: 0.5vmin; opacity: 1; } 100% { width: var(--finalSize); opacity: 0; } }
Step2:The fireworks animation will now be created in this last stage using the class selector fireworks and a variety of colours. When we added colour and position to our CSS, the fireworks motion started after two seconds and went on forever, giving the appearance that actual fireworks were being fired.
.firework, .firework::before, .firework::after { --initialSize: 0.5vmin; --finalSize: 45vmin; --particleSize: 0.2vmin; --color1: yellow; --color2: khaki; --color3: white; --color4: lime; --color5: gold; --color6: mediumseagreen; --y: -30vmin; --x: -50%; --initialY: 60vmin; content: ""; animation: firework 2s infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, var(--y)); width: var(--initialSize); aspect-ratio: 1; background: /* radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%, */ radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%, /* bottom right */ radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%, /* bottom left */ radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%, /* top left */ radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%, /* top right */ radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%; background-size: var(--initialSize) var(--initialSize); background-repeat: no-repeat; } .firework::before { --x: -50%; --y: -50%; --initialY: -50%; /* transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */ transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg); /* animation: fireworkPseudo 2s infinite; */ } .firework::after { --x: -50%; --y: -50%; --initialY: -50%; /* transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */ transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); /* animation: fireworkPseudo 2s infinite; */ } .firework:nth-child(2) { --x: 30vmin; } .firework:nth-child(2), .firework:nth-child(2)::before, .firework:nth-child(2)::after { --color1: pink; --color2: violet; --color3: fuchsia; --color4: orchid; --color5: plum; --color6: lavender; --finalSize: 40vmin; left: 30%; top: 60%; animation-delay: -0.25s; } .firework:nth-child(3) { --x: -30vmin; --y: -50vmin; } .firework:nth-child(3), .firework:nth-child(3)::before, .firework:nth-child(3)::after { --color1: cyan; --color2: lightcyan; --color3: lightblue; --color4: PaleTurquoise; --color5: SkyBlue; --color6: lavender; --finalSize: 35vmin; left: 70%; top: 60%; animation-delay: -0.4s; }
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
We have completed our CSS section, Here is our final updated output CSS.
Final Output
Video Output:
We have completed our CSS section, Here is our updated output with CSS. I hope you like the Fireworks Animation, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.
Age Calculator Using Javascript
Thank you
This post teaches us to create a Fireworks Animation using simple HTML & 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
code by – Alvaro Montoro
Which code editor do you use for this Fireworks Animation coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!
ADVERTISEMENT