Techumber

Amazing Neon Rain Effect Using Pure CSS3

Github avatar
Dimpu
March 13, 2013. 2 min read

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.


...