2

我在 Chrome 中的简单动画遇到了一些麻烦。我正在开发一个非常简单的预加载器，它包含在一个可以及时增加其大小的圆圈中。这就是我创建这个的方式：

#circle{
position:absolute;
    display:block;
        width:40px;
    height:40px;
        background:#000;
    top:50%;
    left:50%;
    margin:-20px 0 0 -20px;

    -webkit-border-radius:50%;
     -khtml-border-radius:50%;
       -moz-border-radius:50%;
            border-radius:50%;

    -webkit-transform:scale(0.3);
       -moz-transform:scale(0.3);
        -ms-transform:scale(0.3);

    -webkit-animation:loading 1.5s ease-out forwards infinite;
       -moz-animation:loading 1.5s ease-out forwards infinite;
        -ms-animation:loading 1.5s ease-out forwards infinite;
}

这是动画：

@-webkit-keyframes loading {
    0%{-webkit-transform:scale(0.3);}
    50%{-webkit-transform:scale(1);} 
    100%{-webkit-transform:scale(0.3);}    
}

这是结果，边缘仅在 Chrome 上被切断。Safari，也使用 webkit 完美地呈现了这一点。（注意顶部和左侧的切口）

在此处输入图像描述

和最后一个问题有关。您将如何计划 IE 的图形回退？我的意思是，我可以要求 modernizr 并创建后备方案，删除它并通过 JS 添加图形。但我想知道只使用 CSS 的更好方法。

该动画在 IE 上不起作用，因此我们的想法是删除黑色圆圈并在其位置添加一个动画预加载器 gif。

希望你能帮忙，因为它让我发疯！

非常感谢！

4

2 回答 2

1

看起来它被它的容器隐藏了。

尝试这个：

 #circle {
   margin:-19px 0 0 -19px;
 }
于 2013-03-07T17:23:46.473 回答
0

问题与border-radius的属性有关，把圆改成svg图片。

于 2021-11-18T12:29:47.053 回答