使用CSS3动画实现的Hover特效集锦

CSS3 驱动的悬停效果集合，可应用于链接、按钮、徽标、SVG、特色图像等。轻松应用到您自己的元素、修改或仅用于获取灵感。可用于 CSS、Sass 和 LESS。

Hover.css是一套使用CSS3动画实现的Hover特效集锦, 包含了：

2D变形

边框过渡效果

阴影过渡效果

页脚翻转效果

查看演示：

http://ianlunn.github.io/Hover/

github地址：

https://github.com/IanLunn/Hover

<link href="css/hover.css" rel="stylesheet" media="all">

<a href="#" class="button">Checkout</a>

.button {
    display: inline-block;
    padding: 1em;
    background-color: #79BD9A;
    text-decoration: none;
    color: white;
}

/* Float */

.hvr-float {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.hvr-float:hover,
.hvr-float:focus,
.hvr-float:active {
  transform: translateY(-8px);
}