动画图标字体微调器

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

找到了更好的解决方案。一起放在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 2

我不确定我是否满足所有要求，但我会说您正在尝试更改序列中元素的颜色。

当您说您希望动画前卫而不是平滑时，可以使用关键帧来完成，它只是让您做更多的工作。您只需要创建非常接近另一个的重复步骤：

@-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 3

您应该做的是将微调器图标以固定距离围绕一个点放置 12 次，该点与其相邻部分相距 30 度。然后将第一块（12 点钟）的背景更改为您想要开始动画的第三个最暗的颜色。然后在动画设置一段时间后，将第三个最暗的颜色移动到下一个片段作为其背景。如果你能给我提供你的图标字体，我会让你成为一个 jsfiddle。