wordpress网站导航栏动效

首先在Font Awesome图标库中找到自己想要的图标http://www.fontawesome.com.cn/faicons/

选择想要的动效https://l-lin.github.io/font-awesome-animation/

示例

在父元素悬停时

对于父悬停，请添加 CSS 类，然后在父元素上：faa-parent animated-hover

官方示例

<a href="#" class="faa-parent animated-hover">
  <i class="fa fa-wrench faa-wrench" style="font-size: 3em;"></i> hover mouse here
</a>

实际运用

fa fa-home：图标样式

faa-wrench：图标动效

<span class="faa-parent animated-hover"><i class="fa fa-home faa-wrench"></i> Home</span>