Question

我希望ionicon（猜测它的SVG）迭代地改变颜色。我尝试了以下内容，但它只显示了紫色的svg图标：

元素

<a class="ion-social-twitter button-home"></a>

CSS

.button-home {
    fill: #fff;
    -webkit-animation: animation-button 20000ms infinite;
    -moz-animation: animation-button 20000ms infinite;
    -o-animation: animation-button 20000ms infinite;
    animation: animation-button 20000ms infinite;
    font-size: 25vh;
}

@-webkit-keyframes animation-button {
    0%   {fill:red; }
    25%  {fill:yellow; }
    50%  {fill:blue; }
    75%  {fill:green; }
    100% {fill:red; }
}
@keyframes animation-button {
    0%   {fill:red; }
    25%  {fill:yellow; }
    50%  {fill:blue; }
    75%  {fill:green; }
    100% {fill:red; }
}

Answer 1

您使用 ionicons 作为字体。只需将fill更改为color，就像这样 -

@-webkit-keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}

@keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}

这是一个带Bootstrap Glyphicons的演示。

Fiddle

Answer 2

其图标类型字体，因此请尝试使用{{1em>（不是{{1em>

color

如何设置Ionicon的颜色动画？

2 个答案: