动画css3闪烁星星

Question

请帮助处理以下代码:-

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(){
    for (var i=0; i <= 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 get random number
rand:function(){
    return Math.random();
},
//createing html dom for 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/

背景和星星动画覆盖了整个body元素。我想定义一个div元素，并在div中限制背景和星星动画，这样我就可以为它定义一个自定义的高度。

谢谢

Answer 1

首先，让我们为星星创建一个容器:

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

现在在脚本中引用容器而不是body:

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

然后样式化:

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

裁判:http://jsfiddle.net/H29j7/6/