0

我需要两个数字并排动画从上到下但它不起作用。如果我在 .f_circleG 类中定位：绝对，它的工作但不是并排的。另一个问题是为什么需要职位：绝对有动画。下面是我的 HTML 和 CSS 代码。

<style type='text/css'>

  ul, ul li { list-style:none; display:inline; }

 .f_circleG{
  position:absolute;
  background-color:#FFF;
  animation:f_fadeG 1.00s infinite;
 }

@-moz-keyframes f_fadeG {
   0%{ background-color:transparent; top:0px;}
   100%{ background-color:transparent; top:100%; }
}

</style>

</head>
<body>    
<div id="floatingCirclesG">
    <ul>
        <li  class="f_circleG">1</li>
        <li  class="f_circleG">2</li>
    </ul>
</div>

</body>
4

2 回答 2

0

职位：绝对

元素相对于它的第一个定位（非静态）祖先元素定位

试试这个代码

<ul>
<li  class="f_circleG">1</li>&ensp;&ensp;&ensp;&ensp;&ensp;
<li  class="f_circleG">2</li>
</ul>

如果您不在动画中添加位置：绝对，则列表项与此处列表的祖先相比变为静态，因此动画将不起作用。

于 2013-04-11T07:02:24.300 回答
0

http://jsfiddle.net/teZdz/

希望这能解决你的问题

html

<div id="floatingCirclesG">
    <ul>
      <li class="f_circleG">1</li>
      <li class="f_circleG">2</li>
    </ul>
  </div>

css

ul, ul li { list-style: none; display: inline; }

#floatingCirclesG { height: 200px; }

.f_circleG { position: relative; display: inline-block; -webkit-animation: f_fadeG 1.00s infinite; }

@-webkit-keyframes f_fadeG { 
0% {top:0px;}
100% {top:100%;}
}
于 2013-04-12T05:38:57.713 回答