css - 为什么ajax加载器模糊？

Question

加载程序有一种奇怪的模糊 Blob 颜色。原始装载机看起来不像附加的装载机。请参阅附件和下面的代码。 [![在此处输入图片描述][1]][1]

#acp-overlay
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: black;
    -moz-opacity: 0.3;
    opacity:.3;
    filter: alpha(opacity=30);
    z-index: 10000;
}

    #ajaxcartpro-progress{
        border: none;
        position: fixed;
        text-align: center;
        padding: 0px;
        background-color: transparent;
        z-index: 999999;
        color: black;
        max-width: 200px;
        /*position:absolute;*/
        /*top: expression(parseInt(document.documentElement.scrollTop, 10) +window.ACPTop+ "px");*/
    }

Answer 1

不要使用 GIF 图像来创建动画，请查看 CSS3 keyframe animations并使用 PNG Sprite 。

编辑:我认为 Walsh's article描述起来很容易。

首先，您当然需要像 <div class="loading"></div> 这样的容器

然后，使用 CSS，将其背景图像设置为包含动画的 Sprite 。基本上，这里发生的是每次刷新时您只显示背景的部分，从而创建动画。浏览器除了像这样随时间推送背景位置(或其他属性)外什么都不做:

@keyframes loadinganim {  
    0% {background-position: -6864px 0; } # starting position depending on the sprite image
    100% {background-position: 0 0;} # where should the animation end
}

.loading {
  background-image: url(images/loadingSprite.png); # path to the sprite
  animation: loadinganim 3.75s steps(44) infinite; # what's the animation called, how often it should refresh, how many steps, and for how long it should last
  # ... other attributes
}

然而，旧版浏览器不支持此功能，因此您需要提供后备(如带背景的 GIF 图像)。您可能还需要前缀 animation属性以使其在 Safari 等浏览器中工作:

.loading {
  animation: # ...
  -webkit-animation: # ..
  # ... other attributes
}