CSS3加载旋转器没有图像的问题

Question

我对CSS没有太多经验。我已经创建了一个HTML5网络应用程序。为了在页面中显示一些加载活动，我使用了此博客中的CSS：CSS3 loading spinners without images。作者展示了如何在没有任何图像的情况下创建加载屏幕。我使用了精确的CSS3代码和一些额外的div。但不知何故，当我在页面内使用时，其中一个条形图未正确对齐。我得到了进度条，如下图所示：

CSS＆amp; HTML如下：

<div id="mainSpinnerDiv_aims">
<div id="spinnerDiv_aims">
  <div class="bar1_aims"></div>
  <div class="bar2_aims"></div>
  <div class="bar3_aims"></div>
  <div class="bar4_aims"></div>
  <div class="bar5_aims"></div>
  <div class="bar6_aims"></div>
  <div class="bar7_aims"></div>
  <div class="bar8_aims"></div>
</div>  
<p id="waitText_aims"> please wait...   </p>    
 </div> 


.bar1_aims {
   -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;
 }
.bar2_aims {
   -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;
 }
.bar3_aims {
   -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;
 }
.bar4_aims {
   -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;
 }
.bar5_aims {
   -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;
 }
.bar6_aims {
   -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;
 }
.bar7_aims {
   -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;
 }
.bar8_aims {
   -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;
 }


#mainSpinnerDiv_aims{
margin-top:70px;
width: 100%;
text-align:center;
}

#spinnerDiv_aims{
    position:relative; 
    width:100px;
    height:100px;
    display: inline-block;
    -webkit-animation-name: rotateSpinner;
    -webkit-animation-duration:1.3s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}

#waitText_aims {
font-weight:600;
}

#spinnerDiv_aims div{
width:10px;
height:30px;
background:#a00;
position:absolute;
top:35px;
left:45px;
}

@-webkit-keyframes rotateSpinner {
   from {-webkit-transform:scale(0.25) rotate(0deg);}
   to {-webkit-transform:scale(0.25) rotate(360deg);}
}

请注意，“bar1”是上图中没有正确对齐的那个。

修改

感谢大家的快速回复。最后我弄明白了这个问题。事实证明我之前有一些评论.bar1_aims {}风格。它没有得到适当的评论。这就是为什么只有bar1搞砸了。它现在已经解决了。

Answer 1

我理解在图像上使用CSS来减少HTTP请求并提高性能，但是用一系列不断运行javascript函数的div替换一个小的动画.gif文件来制作动画似乎毫无意义。

考虑到只有在等待其他东西加载时才会使用它，这似乎具有讽刺意味。

---

因此我的答案是在Ajax Load上生成.gif图片，并用以下内容替换您的代码：

<img src="/ajax-loader.gif" alt="Loading..." />

Answer 2

我认为可能导致问题的是标记。到处都有奇怪的';。实际的代码对我来说似乎很好：http://jsfiddle.net/87Rbs/