JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="back" onload="add();">
        </div>

CSS

body{
  background-color: #fff;
}
@keyframes spin{
  0%{
    top: -20px;
  }
  100%{
    top:90%;
    background-color: #000;
  }
}

JavaScript

function add(){
var div = document.createElement("div");
div.style.width = "1px";
div.style.height = '7%';
div.style.background = 'linear-gradient(rgba(255,255,255,0) 0%, #ffffff 75%, #ffffff 100%)';
div.style.position = 'absolute';
div.style.animation = 'spin 4s infinite';
div.style.transition =  'all 3s';

var l = 10;

for (var i;i<20;i=i+1){
    div.style.left = toString(l+10)+'px';
    div.style.animationDelay = toStrin(Math.random() * 10) + 's';
    document.getElementsClass("back").appendChild(div);
}
}
window.onload = function(){
  add();
}