我正在使用带有 font-face 的 CSS 变换/动画（twitter bootstrap/字体真棒 http://fortawesome.github.com/Font-Awesome/）以生成类似 gif 的旋转图标。
问题是图标绕 360 度旋转时会晃动。看看这个 JSFiddle http://jsfiddle.net/timrpeterson/pGhFX/6/看看我的意思。有谁知道怎么做not摇晃？或者至少让它旋转得更顺畅一点？
这是下面的代码：
CSS:
i.icon-repeat {
-webkit-animation: Rotate 500ms infinite linear;
-moz-animation: Rotate 500ms infinite linear;
-ms-animation: Rotate 500ms infinite linear;
-o-animation: Rotate 500ms infinite linear;
animation: Rotate 500ms infinite linear;
}
@-o-keyframes Rotate {
from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate {
from {-ms-transform:rotate(0deg);}
to {-ms-transform:rotate(360deg);}
}
@-webkit-keyframes Rotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes Rotate {
from { transform:rotate(0deg);}
to { transform:rotate(360deg);}
}
#iconRepeatMain{
display: inline-block;
position: absolute;
z-index:10007;
left: 50%;
top: 50%;
margin-left: -24px; /* -1 * image width / 2 */
margin-top: -24px; /* -1 * image height / 2 */
font-size:36px;
}
HTML:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<i id='iconRepeatMain' class='icon-repeat' style='font-size:36px; color:red'></i>
Note:如果有人想在您自己的 Web 应用程序中使用此代码，请务必在完成所需的操作后从 DOM 中删除此微调器。无论浏览器如何，让这个图标在后台旋转都会消耗CPU，就像你不会相信的那样。另外，只需切换其可见性，即display:none，不起作用。您需要将其从 DOM 中删除，如下所示：$('#iconRepeatMain').remove();
默认情况下，CSS 使用属性来转换其垂直和水平中心的内容transform-origin。此默认值的简写语法是50% 50%，它表示原点的 x 值和 y 值。
对于这个图标，我发现将 y 原点移动到 38% 可以使其变得更加平滑，但您需要尝试一下才能获得精确的值。在 JSFiddle 上查看 http://jsfiddle.net/4VGcZ/
i.icon-repeat {
-webkit-transform-origin:50% 38%;
-moz-transform-origin:50% 38%;
-ms-transform-origin:50% 38%;
-o-transform-origin:50% 38%;
transform-origin: 50% 38%;
}
欲了解更多关于transform-origin属性，我推荐有关该属性的 MDN 文章。 https://developer.mozilla.org/en-US/docs/CSS/transform-origin
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
