14

我正在使用带有 font-face ( twitter bootstrap/font-awesome ) 的 CSS 转换/动画来生成一个类似于 gif 的微调器图标。

问题是图标围绕 360 度旋转时会摇晃。请参阅此 JSFiddle以了解我的意思。有谁知道如何让它不摇晃？或者至少让它旋转得更顺畅一点？

这是下面的代码：

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>​

注意：如果有人想在您自己的 Web 应用程序中使用此代码，请确保在完成所需的操作后从 DOM 中删除此微调器。让这个图标在后台旋转会烧毁 CPU，无论您使用哪种浏览器，您都不会相信。此外，简单地切换其可见性，即 ，display:none是行不通的。您需要像这样从 DOM 中删除它：$('#iconRepeatMain').remove();

4

4 回答 4

16

默认情况下，CSS 使用属性转换关于它们的垂直和水平中心的东西transform-origin。此默认值的简写语法是50% 50%，它表示原点的 x 和 y 值。

对于这个图标，我发现将 y 原点移动到 38% 会使它变得平滑一点，但您需要使用它来获得精确的值。在 JSFiddle 上查看

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 文章。

于 2012-12-19T19:17:56.247 回答
4

尝试在元素上设置特定的高度和宽度。通过反复试验，我发现添加：

#iconRepeatMain {
    width: 26px;
    height: 19px;
}

字体居中很好，似乎消除了摆动。但是，这可能取决于正在使用的浏览器——彻底测试它。

http://jsfiddle.net/mblase75/pGhFX/13/

于 2012-12-19T19:12:16.100 回答
3

我没有在 Font Awesome 网站的页面中看到它的文档，但是 CSS 源代码显示了一个图标旋转类，它可以无休止地旋转图标，并且对于您的图标重复徽标，几乎没有摆动。

<i class="icon-repeat icon-spin"></i>

...虽然我猜它真的是为 icon-spinner 图标准备的：

<i class="icon-spinner icon-spin"></i>

编辑：d'oh ...这依赖于比您的示例中更新的 font-awesome.css 。所以也许答案就是他们自己修复了摆动。icon-spin 类是新的。

于 2013-05-15T05:35:18.077 回答
0

我如何解决图标字体偏离中心旋转的问题： 我必须解决几个问题： 1. 图标大小：它必须是整个 px 大小（例如 font-size:small; 使我的图标为 17.5 px 所以中心不是转换的绝对中心） 2. 定义显示：图标级别的块使其在父 div 的中间正确居中​​ 3. 定义父 div 的确切正方形大小（在我的情况下是按钮）并固定填充使它正确居中 4. 添加任何文本阴影将改变内部图标的大小，使其偏离中心。诀窍是在我的情况下将悬停样式更改为与背景颜色相同的阴影

所以这里是代码：

CSS：

button.close {
padding: 10px;
opacity: 0.8;
text-shadow: 1px 1px 1px #999; 
width: 40px;
height: 40px;
}
button.close i{
font-size: 20px;
max-width: 20px;
max-height: 20px;
display: block;
}
button.close:hover {
text-shadow: 1px 1px 1px #fff; 
}
/* rotation CSS*/
@keyframes anim-rotate {
0% {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes anim-rotate-next {
0% {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotate{
animation: anim-rotate-next 1s normal linear;
}
.rotate.down{
animation: anim-rotate 1s normal linear;
}

HTML：

<button type="button" class="close"><i class="lnr lnr-sync rotate"></i></button>

最后是用于切换旋转类 JQuery 的 JQuery：

$("#parentDiv").on('click', 'i.lnr-sync', function () {
// rotiraj ikonu
$(this).toggleClass("down");
});
于 2015-10-01T14:45:07.233 回答