我在我的自定义图标字体中创建了 12 个字形来表示加载微调器(OSX/iOS 样式)的每个刻度。
标记看起来像这样
<div class="spinner">
<span class="c1"></span>
...
<span class="c12"></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;
}
}
关于css - 动画图标字体微调器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14905216/