0

我想做的事

我使用 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

4

1 回答 1

1

您的 css 类在悬停时未激活的原因是您忘记在类前面放置一个句点。

所以这:

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

应该是这样的:

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

我在这个 js-fiddle 中为你修复了它!

https://jsfiddle.net/uthvam65/

于 2016-07-29T18:28:56.080 回答