Hexo里animated 动画的使用方法

Getting started

Install from NPM:安装

1
npm install font-awesome-animation

Or with a CDN:

https://www.jsdelivr.com/package/npm/font-awesome-animation

Include CSS file in your index.html file: 

1
<link rel="stylesheet" href="font-awesome-animation.min.css">

在_config.anzhiyu.yml打开开关并添加带CDN的css：

1
2
3
4
icons:
  ali_iconfont_js: # 阿里图标symbol 引用链接，主题会进行加载 symbol 引用
  fontawesome: true #是否启用fontawesome图标
  fontawesome_animation_css: https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.min.css #fontawesome_animation 如果有就会加载

或 引用到inject位置 插入css

1
2
3
4
5
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.min.css">

Usage

On DOM load

Add the desired CSS class faa-xxx along with animated to the icon (or any element of your DOM):

1
2
3
<i class="fa fa-wrench faa-wrench animated"></i>
<i class="fa fa-moon faa-rising animated"></i>
<i class="fa fa-star faa-falling animated"></i>

fa fa-wrench指的icon图标，在https://fontawesome.com/v4/icons/ 找到，

faa-wrench是动画类型可以在https://l-lin.github.io/font-awesome-animation/ 找到

On hover

Instead of using animated, use the animated-hover CSS class:

1
2
<i class="fa fa-wrench faa-wrench animated-hover"></i>
<i class="fa fa-star faa-falling faa-reverse animated-hover"></i>

On parent element hover

For parent hover, add the CSS class faa-parent and animated-hover on the parent element:

</a>

hover mouse here

1
2
3
4
5
6
7
<a href="#" class="faa-parent animated-hover">

<i class="fa fa-wrench faa-wrench" style="font-size: 3em;"></i>

</a>

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

Animation speed - hover mouse here

You can regulate the speed of the animation by adding the CSS class faa-fast or faa-slow:

是不是很快？ 是不是很慢？

1
2
3
4
5
6
7
<i class="fa fa-battery-quarter faa-wrench animated faa-fast"></i>
<i class="fa fa-bell faa-wrench animated faa-fast"></i>
<i class="fa fa-commenting faa-wrench animated faa-slow"></i>
<i class="fa fa-circle faa-burst animated faa-fast"> </i> 是不是很快？ <i class="fa fa-circle faa-burst animated faa-slow"> </i> 是不是很慢？
<i class="fa fa-venus-mars faa-spin animated faa-slow"></i>
<i class="fa fa-refresh faa-spin animated faa-fast"></i>
<i class="fa fa-recycle faa-spin faa-reverse animated"></i>

other 动画效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<i class="fa fa-wrench faa-wrench animated" color="blue"></i>

<i class="fa fa-exclamation-triangle faa-ring animated"></i>

<i class="fa fa-envelope faa-shake animated faa-fast"></i>

<i class="fa fa-envelope faa-horizontal faa-reverse animated"></i>

<i class="fa fa-thumbs-up faa-vertical animated"></i>

<i class="fa fa-exclamation-triangle faa-flash animated"></i>

<i class="fa fa-thumbs-up faa-bounce animated"></i>

<i class="fa fa-thumbs-down faa-bounce faa-reverse animated"></i>

<i class="fa fa-cog faa-spin animated"></i>

<i class="fa fa-sun faa-spin faa-reverse animated"></i>

<i class="fa fa-plane faa-float animated"></i>

<i class="fa fa-heart faa-pulse animated"></i>

<i class="fa fa-envelope faa-shake animated"></i>

<i class="fa fa-trophy faa-tada animated"></i>

<i class="fa fa-fighter-jet faa-passing animated"></i>

<i class="fa fa-space-shuttle faa-passing faa-reverse animated"></i>

<i class="fa fa-circle faa-burst animated"></i>

<i class="fa fa-star faa-falling animated"></i>

<i class="fa fa-moon faa-rising animated"></i>