Skip to content

Instantly share code, notes, and snippets.

@jamesknelson
Last active Mar 24, 2020
Embed
What would you like to do?
Fireworks with HTML/CSS
<style>
body {
background-color: black;
}
.dot {
position: absolute;
top: 50%;
left: 50%;
}
.inner {
background-color: red;
border-radius: 999px;
width: 7px;
height: 7px;
animation: 0.8s ease-out explode;
opacity: 0;
}
.t1 {
transform: rotate(30deg);
}
.t2 {
transform: rotate(60deg);
}
.t3 {
transform: rotate(90deg);
}
.t4 {
transform: rotate(120deg);
}
.t5 {
transform: rotate(150deg);
}
.t6 {
transform: rotate(180deg);
}
.t7 {
transform: rotate(210deg);
}
.t8 {
transform: rotate(240deg);
}
.t9 {
transform: rotate(270deg);
}
.t10 {
transform: rotate(300deg);
}
.t11 {
transform: rotate(330deg);
}
.f1 {
transform: translate(-100px, -100px);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.f1 .inner {
background-color: blue;
animation: 0.8s ease-out explode 0.3s;
}
.f2 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@keyframes explode {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100px);
opacity: 0;
}
}
</style>
<div class="f1">
<div class="dot t1"><div class="inner"></div></div>
<div class="dot t2"><div class="inner"></div></div>
<div class="dot t3"><div class="inner"></div></div>
<div class="dot t4"><div class="inner"></div></div>
<div class="dot t5"><div class="inner"></div></div>
<div class="dot t6"><div class="inner"></div></div>
<div class="dot t7"><div class="inner"></div></div>
<div class="dot t8"><div class="inner"></div></div>
<div class="dot t9"><div class="inner"></div></div>
<div class="dot t10"><div class="inner"></div></div>
<div class="dot t11"><div class="inner"></div></div>
<div class="dot t12"><div class="inner"></div></div>
</div>
<div class="f2">
<div class="dot t1"><div class="inner"></div></div>
<div class="dot t2"><div class="inner"></div></div>
<div class="dot t3"><div class="inner"></div></div>
<div class="dot t4"><div class="inner"></div></div>
<div class="dot t5"><div class="inner"></div></div>
<div class="dot t6"><div class="inner"></div></div>
<div class="dot t7"><div class="inner"></div></div>
<div class="dot t8"><div class="inner"></div></div>
<div class="dot t9"><div class="inner"></div></div>
<div class="dot t10"><div class="inner"></div></div>
<div class="dot t11"><div class="inner"></div></div>
<div class="dot t12"><div class="inner"></div></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment