是否可以为Fontastic自定义图标设置动画？

Question

我想做什么

我使用Fontastic制作了自定义图标（例如icon-plus-circle），我一直试图为它们制作动画。当我将鼠标悬停在icon-plus-circle上时，我希望它变得更大。我尝试使用font来做到这一点，但它没有用。

我的问题是：可以动画自定义图标吗？

如果有人可以帮助我制作动画这些非常受欢迎的自定义图标！

我的代码

HTML 的

<div class="student-row">
    <div class="student-box student-box-add">
        <button type="button" class="icon-plus-circle" aria-label="Add student"></button>
    </div>
</div>

CSS

.icon-plus-circle {
    color: #02C8A7;
    transition-property: font;
        -webkit-transition-property: font;
        -moz-transition-property: font;
        -o-transition-property: font;
    transition-duration: 0.5s;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
}

icon-plus-circle:hover{
    font-size: 5em;
}

JSFiddle

Answer 1

你的css课程在悬停时没有激活的原因是你忘记在课堂上放置一段时间。

所以这个：

    icon-plus-circle:hover{
      font-size: 5em;
}

应该是这样的：

   .icon-plus-circle:hover{
      font-size: 5em;
}

我在这个js-fiddle中为你修好了！

https://jsfiddle.net/uthvam65/