1

我在自定义图标字体中创建了 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;
  }
}

现在我想在刻度字形的情况下为颜色设置动画，但不幸的是，colorcss 属性似乎不是可动画的，并且background在这种情况下似乎没有帮助。此外，我没有找到用关键帧制作动画的方法，因为动画很流畅，不像我需要的那样前卫。

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

4

3 回答 3

1

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

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

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

}

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

当然，这可能会扩展到您想要的步骤数量；只是您需要两次声明每个属性。

还要注意我确实在改变颜色。一个演示（仅限 webkit）：

小提琴

新答案

现在很清楚您想要什么，最好的解决方案是：

来自一个 div web 的示例

请注意，最后您正在进行旋转：

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

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

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

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

于 2013-02-16T08:55:56.360 回答
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;
    }
}
于 2013-02-16T10:31:22.293 回答
0

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

于 2013-02-16T00:09:31.987 回答