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/

背景和星星动画覆盖整个身体元素。我想定义一个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/

动画css3闪烁的星星

1 个答案: