3.Btn、Div特效---利用border-radius

1.效果图（具体代码再最下面）：

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

1. 效果一：
   ①效果图：
   
   ②思路：需要一个容器wrap和3个div，外部容器wrap设置border，内部的3个div的width和height相等，并利用border-radius为50%，使其形成圆形；然后让两个div分别位于warp边框的左边和右边，hover时让其移动到盒子中间；而另一个div的width和height相等（宽度需要能覆盖整个wrap，并将其定位到wrap容器的中央），hover时让两个小球相遇时，才让大球开始放大，并最终覆盖wrap容器；

2. 效果二：
   ①效果图：
   
   ②思路：利用border-radius将div的形状变为圆形，然后将其定位到容器wrap的左下角，接着手动调试到div能覆盖整个wrap，记得添加overflow：hidden；最后hover时让其width、height变化到足够大时，就能有上图效果；

3. 效果三：
   ①效果图：
   
   ②思路：射线的放射效果需要8个div，两个两个重叠在一起，一个div的背景颜色与wrap的背景颜色一样，另一个的div的背景为棕色，hover时让棕色的div的width先进行变化，之后白色的div的width再进行变化，这就形成放射效果，放射的起始位置与left、top的设置有光，还需要用rotate对其进行旋转；最后在放射到中间时，让里面的div放大到足够覆盖整个wrap容器；

4 .效果四：
①效果图：

②思路：利用border-radius将四个重叠在一起的div变为圆形，然后分别设置其border-left、border-top、border-right、border-bottom（div的width和height为0）；接着通过变化border-width和通过不同的transition延时来实现上图的效果；
4 .效果五：
①效果图：
②思路：

3.具体代码：GitHub链接