Question

我正在尝试使用CSS动画为我的图库创建预加载器动画。当我在下面使用CSS代码时，它在Chrome，Firefox中看起来不错，但它在互联网Explorer和Safari中看起来并不好看。以下是原始picture的参考资料 - 对于演示，请参阅此fiddle。

我挖掘了与此主题相关的大多数文章，并应用了似乎有意义的修补程序（请参阅代码中的注释），但是它仍然看起来像垃圾。

你们中的任何一个CSS向导都有解决这个问题的方法吗？

div.preloader-container {
    background-image: url('img/preloader.png') no-repeat !important;
    background-size: 20px 20px !important;
    height: 20px !important;
    width: 20px !important;
    position: relative !important;
    top: 50% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;

    /* Attempt to fix it 1 */
    -webkit-backface-visibility: hidden !important;
    -ms-backface-visibility:     hidden !important;
    -moz-backface-visibility:    hidden !important;
    backface-visibility:         hidden !important;

    /* Attempt to fix it 2 */   
    outline: 1px solid transparent !important;

    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;

}
@-moz-keyframes spin { 100% { 
    -moz-transform:rotate(360deg);  
    }
}
@-webkit-keyframes spin { 100% { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: rotate(360deg);
    }
}
@keyframes spin { 100% {
    transform:rotate(360deg);
    }
}

Answer 1

好吧我的非常具体的例子是问题是这些浏览器严重处理了200px图像到20px的重新调整大小。一旦我将png的大小减小到40px并使用backgroud-size属性调整为20px，它就像魅力一样。希望能帮助其他人解决同样的问题。

以下是已解决问题的演示fiddle，此处仍有issue仍在进行演示。

background-size: 20px 20px;

CSS动画会导致锯齿状边缘

1 个答案: