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链接