css - 没有图像的 CSS3 加载微调器的问题

Question

我对 CSS 没有太多经验。我创建了一个 HTML5 网络应用程序。为了在页面中显示一些加载事件，我使用了这个博客中的 CSS:CSS3 loading spinners without images .作者展示了如何创建没有任何图像的加载屏幕。我使用了带有一些额外 div 的精确 CSS3 代码。但是不知何故，当在我的页面中使用时，其中一个栏没有正确对齐。我得到如下图所示的进度条:

CSS & 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..." />