Hello Coder! Welcome to the Codewithrandom blog. In this article, We create a Fireworks Animation Using Html and CSS.
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.
I hope you enjoy our blog so let's start with a basic HTML structure for the Fireworks Animation.
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.
CSS Fireworks Animation Code:-
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."
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;
}
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.
Thank you
Written by - Codewithrandom/Anki
code by - Alvaro Montoro
Top comments (0)