Hover.css纯CSS3鼠标滑过特效动画库_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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 中的内容。可以查看FontAwesome的所有图标参考来查找你需要的图标。

如果你不想修改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。