如何在字体真棒图标中创建过渡效果

时间:2015-12-06 11:14:02

标签: icons transition font-awesome effect

我需要解决此问题的方法,但它应该在font-awesome图标中可靠。

请帮帮我。在图标悬停时轻松创建字体真棒图标过渡效果

1 个答案:

答案 0 :(得分:5)

Fontawesome转换可以像任何其他CSS转换一样完成。 您只需要为它们设置具有此过渡效果的属性,并定义“新”值。

例如:

.fa{
     font-size:30px;
     margin:5px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.fa:hover{
  font-size: 40px;
  transform: rotate(45deg);
}

在此示例中,悬停时图标将增大并将旋转45度。

请在此处阅读有关转换的信息:http://www.w3schools.com/cssref/css3_pr_transform.asp

您可以在此处查看实时示例:http://jsfiddle.net/gn57dkez/