Animation css3 blinking stars -

please following code :-

html:-

<figure class="star"> <figure class="star-top"></figure> <figure class="star-bottom"></figure> </figure> 

js:-

var limit=100, // max number of starts   body=document.body; loop={ //initilizeing start:function(){     (var i=0; <= limit; i++) {         var star=this.newstar();         star.style.top=this.rand()*100+"%";         star.style.left=this.rand()*100+"%";         star.style.webkitanimationdelay=this.rand()+"s";         star.style.mozanimationdelay=this.rand()+"s";         body.appendchild(star);     }; }, //to random number rand:function(){     return math.random(); }, //createing html dom star newstar:function(){     var d = document.createelement('div');     d.innerhtml = '<figure class="star"><figure class="star-top"></figure>           <figure class="star-bottom"></figure></figure>';     return d.firstchild; },   };   loop.start(); 

http://jsfiddle.net/h29j7/

the background , star animation covering entire body element. want define div element , restrict background , star animation within div can define custom height it.

thank you

first, let's create container stars:

<div id="container"> <figure class="star">   <figure class="star-top"></figure>   <figure class="star-bottom"></figure>  </figure> </div> 

now refer container instead of body in script:

var container=document.getelementbyid('container'); 

and style up:

#container{     height:200px;     width:200px;     overflow:hidden;     background: #212121;     position:relative; } 

ref: http://jsfiddle.net/h29j7/6/