请参考这个小提琴:http://jsfiddle.net/eQegA/3/
<div class="spinner"></div>
.spinner {
width: 100px;
height: 100px;
border: 50px solid blue;
/*border-top-color: #fff;
border-bottom-color: #fff;*/ /* commented out to see the wobble better */
border-radius: 200px;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
在 Google Chrome 中,旋转是稳定的,但由于某种原因,在 IE11 中,圆圈旋转时会出现明显的“摆动”。
有什么想法为什么它如此摇摆吗? IE11有办法解决吗?
就其价值而言,它也发生在其他浏览器上。这与边界如何绘制有关,它不是一个完美的圆形。据我所知,没有快速解决此问题的方法。但是您可以将边框绘制为背景图像。
.spinner {
display:block;
width: 200px;
height: 200px;
border-radius: 100%;
background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
background-size:100%;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
See:
http://jsfiddle.net/eQegA/26/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)