我icon-plus-circle使用Fontastic制作了自定义图标（例如），并且一直在尝试制作动画。当我将鼠标悬停在上方时，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;
}
您的css类没有在悬停时激活的原因是因为您忘记在类的前面放置句号。
所以这：
icon-plus-circle:hover{
font-size: 5em;
}
应该是这样的：
.icon-plus-circle:hover{
font-size: 5em;
}
我在这个js小提琴中为您修复了它！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句