Hover.css是什么鬼東西？
我們看它的官方文檔說明。
這些介紹引文也不是太難懂，你稍微翻譯一下就行。簡單的來說hover.css就是一個鼠標“放上去”的效果合集。是一個動畫庫.的github地址是：Hover演示站
一組CSS3供電的懸停效果，可應用於鏈接，按鈕，徽標，SVG，特色圖像等。
開始使用它
它的使用非常的簡單，主要有如下的步驟，你要是看官方的文檔說明也能明白。如果你想更快的使用它，來閱讀我的博客也是一個非常不錯的選擇哦。
步驟
- 1.下載源代碼，找到hover.css文件，
- 2.導入到自己的html中，
- 3.給你想要實現效果的元素，加上一個類名就行。
雖然上述的簡單，但是具體又有哪些要注意的呢？
<style>
/* 一、如果你只想使用里面的一點點的效果，那么你可以不必引入hover.css文件。 */
/* 1.去到源碼（hover.css）中拿到你想要的效果，比如下面，我只想要一個“鼠標放上去放大的效果”那么我可以這么做。 */
/* 第一張使用方法，你只想要其中的某些效果而已；
1.找到源代碼，
2.復制源代碼，
3.使用類名 */
/* Grow */
.hvr-grow {
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;
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
transform: scale(1.1);
}
/* 二 、如果你想比較全面的使用庫里面的效果，你可以這么做。 */
/* 第二種使用方法，全面的引入link方式 */
/* 直接在你想要的效果前面使用它，通過添加類的方式 */
</style>
<a href="" class="hvr-grow">點擊我</a>
<!-- 三、需要注意的地方 -->
<!-- 字體圖標這么搞呢？比如我想引入bootstrap里面字體圖標 -->
<!-- 1.在link中引入bootstrap.css文件 -->
<!-- 2.復制以下的固定格式修改其中的‘動畫效果代碼（比如我這里的）.hav-icon-forward效果 -->
<!-- 2.在這個效果里面，添加我們需要的字體圖標 比如我這里的是對bootstrap里面的glyphicon-send圖標實現 hvr-icon-spin（旋轉）效果。 -->
<a href="#" class="hvr-icon-spin">
鼠標放上來
<i class="hvr-icon glyphicon glyphicon-send"></i>
</a>
對於less和sass
- 以上是官方文檔的說明，還有源代碼文件夾結構
effects是每一個具體的效果實現
另外的三個是"工具"
還有是正式的開發版
源碼分析
這里是一部分具體的效果實現類，
實現原理其實超級超級簡單啦，比之前的animate.css要簡單多得多，
就帶着大家一點一點的分析了，
思考與探索
以上的幾個css庫，引發了我的一個想法就是自己寫一個css庫。
接下來，我會花比較長的時間帶着大家寫一個簡單的css動畫庫，並且把它開源道github。歡迎大家的奇思妙想往里丟。