我正在尝试使用 CSS 动画为我的画廊创建预加载器动画。当我应用下面的 CSS 代码时,它在 Chrome、Firefox 中看起来不错,但在 Internet 中看起来不太好 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);
}
}
最佳答案
好的,在非常具体的例子中,问题是这些浏览器无法将 200 像素的图像重新调整为 20 像素。一旦我将 png 的大小减小到 40px 并使用 backgroud-size 属性调整到 20px,它就像一个魅力。希望能帮助其他人解决同样的问题。
这是一个演示 fiddle已解决的问题,这是一个 issue仍在发生。
background-size: 20px 20px;
关于CSS动画导致锯齿状边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28088480/