纯CSS3鼠标滑过特效动画库

PetitQ 按钮图标, 文本/链接 2019-1-19 2.12K 0 0

Hover.css 是一款效果很酷的纯 CSS3 鼠标滑过特效动画库。Hover.css 支持的元素包括超链接、按钮、logos、SVG 和图片等。当鼠标滑过元素时有背景颜色变化效果、图标变化效果、阴影、抖动、旋转、折角等 107 种特效。

使用方法

首先你需要将 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。

```
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