动画图标字体微调器

问题描述：

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

答

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

答

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

没有标记/ css我不明白你的答案。您可以假设预先旋转的刻度是unicode值'f001'到'f012'。 – 2013-02-16 00:38:05

你的答案正是我所说的......而且这很棒，很好的工作！ – 2013-02-16 15:37:52

应该有发布的代码;） – 2013-02-16 16:29:43

答

我很确定如果我得到所有要求，但我会说你试图改变序列中元素的颜色。

当你说你想让动画变得前卫而不流畅时，可以用关键帧完成，它只是给你一点工作。你只需要创建重复步骤非常接近其他：

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

当然

这一切与供应商前缀。

动画图标字体微调器

相关推荐