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

【问题标题】：How can create transition effect in font awesome icon如何在字体真棒图标中创建过渡效果
【发布时间】：2016-03-11 01:33:01
【问题描述】：

我需要解决这个问题，但它应该是可靠的字体真棒图标。

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

【问题讨论】：

你能详细说明一下吗？
垂直填充过渡，字体真棒图标中有圆圈

标签： icons transition font-awesome effect

【解决方案1】：

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/

【讨论】：