Sakurairo主题导航栏图标动画

前言

有些大佬博客的导航栏会跳动和旋转等效果，这是使用了font-awesome-animation动画效果，接下来我把添加动画效果的方法告诉大家，希望能为大家博客曾光增彩。

美化教程

因为这大多数都是Font Awesome图标，然而Sakurairo主题默认都引用的有这些图标，所以我们在添加的时候无需再去引入图标，只需要去引入font-awesome-animation。在iro主题设置>其他设置>低使用设置>自定义插入 Header 代码引入。

<link href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.css" tyupe="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.css" tyupe="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.css" tyupe="text/css" rel="stylesheet">

添加图标的位置在后台 > 外观 > 菜单 > 菜单结构 > 导航标签。动画效果有：

• faa-wrench
• faa-ring
• faa-horizontal
• faa-horizontal faa-reverse
• faa-vertical
• faa-flash
• faa-bounce
• faa-bounce faa-reverse
• faa-spin
• faa-spin faa-reverse
• faa-float
• faa-pulse
• faa-shake
• faa-tada
• faa-passing
• faa-passing faa-reverse
• faa-burst
• faa-falling
• faa-falling faa-reverse
• faa-rising

添加格式：

触碰图标有动画：

<i class="fa 图标 动画效果 触发方式"></i>文字
例：
<i class="fa fa-home faa-wrench animated-hover"></i>首页
<i class="fa 图标 动画效果 触发方式"></i>文字
例：
<i class="fa fa-home faa-wrench animated-hover"></i>首页
<i class="fa 图标 动画效果 触发方式"></i>文字
例：
<i class="fa fa-home faa-wrench animated-hover"></i>首页

触碰文字有动画：

<span class="动画 触发方式">
  <i class="fa 图标 动画效果"></i>文字
</span>
例：
<span class="faa-parent animated-hover">
  <i class="fa fa-home faa-wrench"></i>首页
</span>
<span class="动画 触发方式">
  <i class="fa 图标 动画效果"></i>文字
</span>
例：
<span class="faa-parent animated-hover">
  <i class="fa fa-home faa-wrench"></i>首页
</span>
<span class="动画 触发方式">
  <i class="fa 图标 动画效果"></i>文字
</span>
例：
<span class="faa-parent animated-hover">
  <i class="fa fa-home faa-wrench"></i>首页
</span>

不触碰有动画：

<i class="fa 图标 动画效果 触发方式"></i>文字
例：
<i class="fa fa-home faa-wrench animated"></i>首页
<i class="fa 图标 动画效果 触发方式"></i>文字
例：
<i class="fa fa-home faa-wrench animated"></i>首页
<i class="fa 图标 动画效果 触发方式"></i>文字
例：
<i class="fa fa-home faa-wrench animated"></i>首页

在添加动画的时候可能会添加不成功，那么很有可能是引入的版本问题，解决办法是将你使用的图标版本css引入进去就行了。引入位置在iro主题设置>其他设置>低使用设置>自定义插入 Header 代码。

<link href="CSS链接" tyupe="text/css" rel="stylesheet">
<link href="CSS链接" tyupe="text/css" rel="stylesheet">
<link href="CSS链接" tyupe="text/css" rel="stylesheet">

不建议版本混用，因为这样会导致大量css效果冲突。

预览效果

需要放置鼠标在图标上悬停      在图标或文字上悬停都行      不需要操作