%div.wrap
  -144.times do
    %div.c
      
View Compiled
$total: 144;
$time: 4;
$height: 400;
$percent: .69444%;
$dotSize: .9;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: black;
  overflow: hidden;
}

.wrap {
  position: relative;
  height: 100%;
}

.c {
  position: relative;
  height: $height+px;
  width: $percent;
  margin-top: -$height+px;
  animation: drop $time+s infinite ease-in;
  &:after {
    content: "";
    position: absolute;
    width: $dotSize+vw;
    height: $dotSize+vw;
    border-radius: 50%;
    left: 50%;
    bottom: -($dotSize/2)+vw;
    margin-left: -($dotSize/2)+vw;
  }
}

@for $i from 1 through $total {
  $hue: (300/$total) * $i;
  .c:nth-child(#{$i}){
    left: ($i - 1) * $percent;
    background-image: linear-gradient( to bottom, black, hsla($hue, 100%, 50%, .8));
    animation-delay: random($total) * ($time/$total) * -1s;
    &:after {
      background: hsla($hue, 100%, 50%, 1);
    }
  }
}

@keyframes drop {
  80% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 150vh, 0);
    opacity: 0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js