CSS Only Diwali Fireworks (Box Shadows)

css-only-diwali-fireworks-box-shadows.markdown

CSS Only Diwali Fireworks (Box Shadows)

A Pen by 王树贤 on CodePen.

License.

index.pug

- for(var i = 0; i < 15; i++)
  .bomb-rocket
- for(var i = 0; i < 15; i++)
  .normal-rocket
.text Happy Diwali

style.scss

@import url('https://fonts.googleapis.com/css?family=Concert+One');

$colors: springgreen, red, turquoise, yellow, deepskyblue, hotpink;

html,
body {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 10vw;
  
  font-family: 'Concert One', cursive;
  animation: text-animation 5s linear infinite alternate;
}

@keyframes text-animation {
  from { color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; }
  to { color: white; text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080;
text-align: center; }
}

.bomb-rocket, .normal-rocket {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  // animation-timing-function: cubic-bezier(0, 1, 1, 1);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@for $i from 1 through 15 {
  .bomb-rocket:nth-child(#{$i}) {
    left: random(100) * 1vw;
    animation-name: bomb-rocket-animate-#{($i % 3) + 1};
    animation-delay: random(20) * .1s;
    animation-duration: 3 + random(2) * 1s;
    color: nth($colors, random(length($colors)));
  }
  .normal-rocket:nth-child(#{15 + $i}) {
    left: random(100) * 1vw;
    animation-name: normal-rocket-animate-#{($i % 3) + 1};
    animation-delay: random(20) * .1s;
    animation-duration: 3 + random(2) * 1s;
    color: nth($colors, random(length($colors)));
  }
}

$r: 500;
$r-v: 0, 150, 300;
$normal-rocket-box-shadow-from: ();
$normal-rocket-box-shadow-to: ();
$bomb-rocket-box-shadow-from: ();
$bomb-rocket-box-shadow-to: ();

@for $i from 0 through 35 {
  $angle: $i * 10deg;
  
  $x: ($r - nth($r-v, ($i % length($r-v) + 1))) * cos($angle) * 1px;
  $y: ($r - nth($r-v, ($i % length($r-v) + 1))) * sin($angle) * 1px;
  
  $bomb-rocket-box-shadow-from: $bomb-rocket-box-shadow-from, 0 0 5px #fff, 0 0 10px #fff,
    0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor,
    0 0 55px currentColor, 0 0 75px currentColor;
  $bomb-rocket-box-shadow-to: $bomb-rocket-box-shadow-to, $x $y 5px #fff, $x $y 10px #fff,
    $x $y 20px currentColor, $x $y 30px currentColor, $x $y 40px currentColor,
    $x $y 55px currentColor, $x $y 75px currentColor;
  
  $x: $r * cos($angle) * 1px;
  $y: $r * sin($angle) * 1px;
  
  $normal-rocket-box-shadow-from: $normal-rocket-box-shadow-from, 0 0 5px #fff, 0 0 10px #fff,
    0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor,
    0 0 55px currentColor, 0 0 75px currentColor;
  $normal-rocket-box-shadow-to: $normal-rocket-box-shadow-to, $x $y 5px #fff, $x $y 10px #fff,
    $x $y 20px currentColor, $x $y 30px currentColor, $x $y 40px currentColor,
    $x $y 55px currentColor, $x $y 75px currentColor;
}

@for $i from 1 through 3 {
  @keyframes bomb-rocket-animate-#{$i} {
    0% {
      transform: rotate(-20 + $i * 10deg) translateY(0) scale(0);
      opacity: 1;
      box-shadow: none;
    }
    0.1% {
      transform: rotate(-20 + $i * 10deg) translateY(0) scale(0.1, 0.5);
      background: linear-gradient(180deg, currentColor 0%, #000000 80%);
      box-shadow: none;
      opacity: 1;
    }
    50% {
      transform: rotate(-20 + $i * 10deg) translateY(-40vh - $i * 10) scale(0.1, 0.5);
      background: linear-gradient(180deg, currentColor 0%, #000000 80%);
      box-shadow: none;
      opacity: 1;
    }
    50.1% {
      transform: rotate(-20 + $i * 10deg) translateY(-40vh - $i * 10 ) scale(0.1);
      background: transparent;
      box-shadow: $bomb-rocket-box-shadow-from;
      opacity: 1;
    }
    75% {
      transform: rotate(-20 + $i * 10deg) translateY(-40vh - $i * 10) scale(0.1);
      background: transparent;
      box-shadow: $bomb-rocket-box-shadow-to;
      opacity: 1;
    }
    100% {
      transform: rotate(-20 + $i * 10deg) translateY(-40vh - $i * 10) scale(0.1);
      background: transparent;
      box-shadow: $bomb-rocket-box-shadow-to;
      opacity: 0;
    }
  }
}

@for $i from 1 through 3 {
  @keyframes normal-rocket-animate-#{$i} {
    0% {
      transform: rotate(-20 + $i * 10deg) translateY(0) scale(0);
      opacity: 1;
      box-shadow: none;
    }
    0.1% {
      transform: rotate(-20 + $i * 10deg) translateY(0) scale(0.1, 0.5);
      background: linear-gradient(180deg, currentColor 0%, #000000 80%);
      box-shadow: none;
      opacity: 1;
    }
    50% {
      transform: rotate(-20 + $i * 10deg) translateY(-40vh - $i * 10) scale(0.1, 0.5);
      background: linear-gradient(180deg, currentColor 0%, #000000 80%);
      box-shadow: none;
      opacity: 1;
    }
    50.1% {
      transform: rotate(-20 + $i * 10deg) translateY(-40vh - $i * 10 ) scale(0.1);
      background: transparent;
      box-shadow: $normal-rocket-box-shadow-from;
      opacity: 1;
    }
    75% {
      transform: rotate(-20 + $i * 10deg) translateY(-40vh - $i * 10) scale(0.1);
      background: transparent;
      box-shadow: $normal-rocket-box-shadow-to;
      opacity: 1;
    }
    100% {
      transform: rotate(-20 + $i * 10deg) translateY(-40vh - $i * 10) scale(0.1);
      background: transparent;
      box-shadow: $normal-rocket-box-shadow-to;
      opacity: 0;
    }
  }
}

styles

<link href="https://unpkg.com/[email protected]/_math.scss" rel="stylesheet" />