Amazing Neon Rain Effect Using Pure CSS3

Hi guys, Welcome to my one more experiment on CSS3. Do day I will explain you how to create a amazing neon light like rain fall effect using pure css3. Again I am using CSS3’s -animation, -keyframes, -transform properties to create it. Have a look at the demo below.
Amazing Neon Rain Effect Using Pure CSS3-techumber


demo
download

HTML

<section id="rainContainer"> 
<div class="rain" ></div> 
<div class="rain" ></div> 
..... 
..... 
</section> 

In this code rainContainer rain drops. We can create as many we want. But I will use my javascript code to do that work for me.
CSS

#rainContainer{ 
  height: 100%; 
  width: 100%; 
} 
.rain{ 
  animation: move 1.1s linear infinite; 
  transform: rotate(100deg); 
  background: #2187e7; 
  height: 1px; 
  float: left; 
  width: 100px; 
  margin-right: -80px; 
  position: relative; 
  top: 0; 
  box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); 
} 
@keyframes move { 
  0% { top: 0;} 
  100% { top:100%; left: -17px; } 
} 

Javascript code for creating rain drops

<script type="text/javascript"> 
//Rain Object 
  var Rain={ 
    wrap:document.getElementById('rainContainer'), 
    html:" ", 
    //Initilizeing Rain 
    init:function(){ 
      for (var i = 0; i < 100; i++) { 
        var r=Math.random(); 
        this.html+="<div class='rain' style='animation-delay:"+r+"s;'></div>"; 
      } 
    this.wrap.innerHTML=this.html; 

    } 
  }; 
  //Onload Initilize 
  window.onload=Rain.init(); 
</script> 

Cross Browser CSS Suppport

#rainContainer{ 
  height: 100%; 
  width: 100%; 
} 

.rain{ 
  -webkit-animation: move 1.1s linear infinite; 
  -webkit-transform: rotate(100deg); 
  -moz-animation: move 1.1s linear infinite; 
  -moz-transform: rotate(100deg); 
  -o-animation: move 1.1s linear infinite; 
  -o-transform: rotate(100deg); 
  -ms-animation: move 1.1s linear infinite; 
  -ms-transform: rotate(100deg); 
  background: #2187e7; 
  height: 1px; 
  float: left; 
  width: 100px; 
  margin-right: -80px; 
  position: relative; 
  top: 0; 
  box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); 
} 
@-webkit-keyframes move { 
  0% { top: 0;} 
  100% { top:100%; left: -17px; } 
} 
@-moz-keyframes move { 
  0% { top: 0;} 
  100% { top:100%; left: -17px; } 
} 
@-o-keyframes move { 
  0% { top: 0;} 
  100% { top:100%; left: -17px; } 
} 
@-ms-keyframes move { 
  0% { top: 0;} 
  100% { top:100%; left: -17px; } 
} 

That’s it hope you like it.