Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库。有100多种效果可以选择，包括：2D动画、背景动画、边框动画、图标动画、发光渐变、阴影、对话框、折角等100多种特效。
使用方法
首先你需要将hover.css加入到HTML文档的头部。
<link href="css/hover.css" rel="stylesheet" media="all"> |
现在假设你需要为一个按钮添加hover效果。
<a href="#" class="button">Checkout</a> |
.button { display: inline-block; padding: 1em; background-color: #79BD9A; text-decoration: none; color: white;} |
现在你需要找到你效果要添加的鼠标滑过效果的class名称，然后将它加入到按钮的class中即可。
<a href="#" class="button hvr-float">Checkout</a> |
使用FontAwesome来制作图标动画效果
Hover.css使用FontAwesome来制作它的图标效果。要使用这些图标，首先要引入FontAwesome文件。
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"> |
Hover.css的图标是通过元素的:before伪元素添加到元素上的。下面是一个图标向前运动的例子(代码中没有添加浏览器前缀)：
.hvr-icon-forward:before { content: "\f138"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; transform: translateZ(0); transition-duration: 0.1s; transition-property: transform; transition-timing-function: ease-out;} |
上面的代码的关键点是font-family 和 content 的声明。font-family: FontAwesome告诉浏览器你想为伪元素使用FontAwesome字体，content 则表示是哪一个图标。所以，如果你想改变图标，就修改content 中的内容。
如果你不想修改Hover.css文件，你可以通过覆盖的方法来实现图标的修改自定义一个CSS文件，在Hover.css文件之后引入，文件中添加要修改的内容：
.hvr-icon-forward:before { content: "\f001";} |
深入了解Hover.css中的一些hack技术
所有的hover.css效果都使用一些不影响效果的CSS属性来制作，有时候你可能会需要去修改这些CSS属性，下面来看一下一些特殊的地方。
display: inline-block
每一种效果要正常工作需要设置一个dispaly属性。默认情况下，Hover.css将所有的元素都设置为display: inline-block。你可以根据需要将它修改为display: block或display: inline。如果你使用的元素已经有了dispaly属性，那么效果中的display不会覆盖你原有的display。
transform: translateZ(0)
transform: translateZ(0)是一个总所周知的“性能hack”。它通常和CSS3 transforms一起使用来提高移动手机和平板的transforms 效果。
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
当在移动手机和平板上观察CSS3 transformed效果时，边缘有时看起来有锯齿状或稍有不同的颜色。通过使用box-shadow: 0 0 1px rgba(0, 0, 0, 0)，可以为元素使用透明的阴影效果，这样会使边部看起来十分的平滑。
更多的信息请参考：https://github.com/IanLunn/Hover
网盘下载密码:ix7s
