我想做的事
我使用 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;
}