icons - 如何在 Font Awesome 图标中创建过渡效果

标签 icons transition font-awesome effect

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

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

最佳答案

Fontawesome 过渡可以像任何其他 CSS 过渡一样完成。 您只需要为它们设置哪些属性将具有这种过渡效果,并定义"new"值。

例如:

.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/

关于icons - 如何在 Font Awesome 图标中创建过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34116779/

相关文章:

html - CSS 转换在 Firefox 中不起作用

javascript - Ember.js 2、transitionTo 在一级路由中使用多个动态段

swing - JRadioButton MenuItem 中各种尺寸图标的垂直对齐

c# - 如何在编译(使用 csc)c# 之前更改 .exe 文件图标

windows-7 - 专业的 Windows 7 图标包

animation - ReactJs:嵌套元素中的转换

css - 字体很棒 <svg> 大小

css - 修复浏览器缩放时的图标大小(使用 Chrome)

css - 如何降低 fontawesome 文本的高度?

icons - @nebular 自定义菜单 (NbMenuComponent) html 不起作用