Question

我在自定义图标字体中创建了12个字形，以表示加载微调器（OSX / iOS样式）的每个刻度。

标记看起来像这样

<div class="spinner">
  <span class="c1">&#xf001</span>
  ...
  <span class="c12">&#xf012</span>
</div>

这是CSS

.spinner {
  font-family: "nvicons";
  font-size: 24px;
  letter-spacing: -1em;
  .c1 {
    color: #eee;
  }

  ...

  .c12 {
    color: #222;
  }
}

现在我想在勾选字形时为颜色设置动画，但遗憾的是color css属性似乎没有动画效果，background在这种情况下似乎毫无帮助。此外，我没有找到一种方法来设置关键帧的动画效果，因为动画很流畅而且不像我需要的那样是前卫。

是否有可能使用CSS制作动画？我需要做的是以某种方式循环颜色，我真的想避免使用JS。

Answer 1

我不确定我是否满足所有要求，但我会说你试图改变序列中元素的颜色。

当你说你想让动画变得前卫而不平滑时，可以用关键帧完成，它只会给你一些工作。您只需要创建非常接近另一个的重复步骤：

@-webkit-keyframes colors {
    0%   {color: red;}
    49%  {color: red;}
    50%  {color: blue;}
    100% {color: blue;}

}

请注意，从红色到蓝色的所有变化都在49％到50％之间

当然，这可以扩展到您想要的步骤数量;只需要你说两次财产。

还注意到我确实在改变颜色。一个演示（只有webkit）：

fiddle

新答案

现在很清楚你想要什么，最好的解决方案就是那个：

example from one div web

请注意，最后你正在进行轮换：

@-keyframes ajax-loader-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

并隐藏中间步骤（圆圈位于中间位置），动画按步骤完成：

animation: .85s ajax-loader-rotate steps(8) infinite;

当然所有这些都带有供应商前缀。

Answer 2

找到了更好的解决方案。将它放在jsfiddle

上

.spinner {
    position: relative;
    font-family:"nvicons";
    font-size: 24px;
    letter-spacing: -1em;
    color: #eee;
    text-rendering: optimizeSpeed;
}
.spinner > span {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: coloring 1s linear infinite;
}
.spinner .e1 {
    -webkit-animation-delay: 0.0s;
}
.spinner .e2 {
    -webkit-animation-delay: 0.08333s;
}
.spinner .e3 {
    -webkit-animation-delay: 0.16667s;
}
.spinner .e4 {
    -webkit-animation-delay: 0.25s;
}
.spinner .e5 {
    -webkit-animation-delay: 0.33333s;
}
.spinner .e6 {
    -webkit-animation-delay: 0.41667s;
}
.spinner .e7 {
    -webkit-animation-delay: 0.5s;
}
.spinner .e8 {
    -webkit-animation-delay: 0.58333s;
}
.spinner .e9 {
    -webkit-animation-delay: 0.66667s;
}
.spinner .e10 {
    -webkit-animation-delay: 0.75s;
}
.spinner .e11 {
    -webkit-animation-delay: 0.83333s;
}
.spinner .e12 {
    -webkit-animation-delay: 0.91667s;
}
@-webkit-keyframes coloring {
    from {
        color: #222;
    }
    to {
        color: #eee;
    }
}

Answer 3

您应该做的是将旋转器图标定位在距离相邻部件30度的固定距离周围12次。然后将第一块（12点钟）的背景更改为要开始动画的第3个最暗颜色。然后在动画设定的一段时间后，将第3个最暗的颜色移动到下一个作为背景的部分。如果你可以提供你的图标字体，我会让你成为一个jsfiddle。

Animate图标字体微调器

3 个答案: