Fireworks with HTML/CSS

index.html

<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>