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.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.