2.Btn、Div特效---利用height和width

1.效果圖（具體代碼再最下面）：

2.上面各種效果的思路：

1. 效果一：

   ①效果圖：

   

   ②思路：用絕對定位将倆個相同的大小的div定位到一起，然後将index高的div的width設定為0，最後hover的時候使其width變為100%，還有color從blue變為white就可以了。

2. 效果二：

   ①效果圖：

   

   ②思路：需要五個div來實作效果，外層一個div用來設定border，内層四個div的width為外層div的25%，height設定為0，接着用絕對定位将四個div鋪滿外層div的空間。最後hover時，需要設定其left 和top或者left 和bottom，然後hover時，讓四個div的height變為100%。

3. 效果三：

   ①效果圖：

   

   ②思路：需要一個容器wrap和兩個盒子box，兩個盒子上下排列，下面的盒子與容器wrap絕對定位到一起且重疊，下面的盒子設定border，而上面的盒子用于放置多個小的div，然後設定上面的盒子display：inline-block使div并行排列，然後你隻需要設定小div的width：5%(20個)、10%（10個），height：100%；hover的時候，将上面的盒子box裡面的小div移動下來，需要給不用的小div設定不同延時，這樣就構成上面的效果；

   ③也可以将垂直的div，進行旋轉之後，再進行移動，如下圖所示：

   

4. 效果四：

   ①效果圖：

   

   ②思路：需要一個容器wrap和四個div，hover時内層div的width和height為外層wrap的50%，然後設定四個div的位置，分别是left和top、right和top、left和bottom、right和bottom都設定為0；hover時讓其四個div的width、height從0變為50%；

5. 效果五：

   ①效果圖：

   

   ②思路：掃描效果，需要5個div用絕對定位将其定位到一起；然後設定其透明度opacity，需要設定不同的定位在左邊（left：0；top：0）或右邊（right：0；top：0）；然後hover時，讓兩個div的width變為100%，這就是同時從左邊和右邊出發；然後再控制另外兩個div的延時時間，同樣的width也是變為100%，效果如上。

3.具體代碼：GitHub連結