非常好看实用的纯CSS效果，快学起来
最近找到一个比较好看的纯CSS动画效果，分享给大家。
这里的图标使用的font-awesome的图标库。
好了现在我们开始制作我们的页面
首先要导入font-awesome图标库，然后放几个需要的图标
接下来我们就可以开始写我们的css了
首先第一个效果
图标在触碰的瞬间变大，并且颜色形成改变，变大的效果主要是先通过transform：scale(0.8);把图标变成原来的80%大小，再
变回原来100%大小。
.social-btns .btn .fa {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
效果如下：
初步效果
是不是感觉不怎么好看，变白之后可能连图标都看不太清了。
没事我们可以给它添加一个背景颜色这样就好看了，background:#XXX ?这样吗 no no no 这样就太普通了。我们加点东西，把
画面动起来。
我们可以根据图标原来的颜色设置，背景颜色可以设置给btn:before,具体代码如下：
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn:before {
top: 80%;
left: -120%;
}
.social-btns .btn:before {
content:"";
width: 142%;
height: 142%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -20%;
left: -20%;
}
左手右手一个慢动作
是不是效果还不错，哈哈。为什么呢？首先要把btn:before进行顺时针翻转45°然后一定要把before这个框放在btn范围外。
不然就露出来了。然后调整一下btn:before的宽高，btn:before的初始位置，以及终止位置。那么这个效果基本就做出来了。
当然还有一些细节需要注意，个人感觉角度为45°按照btn的角度进行动画更加顺滑。
细心的同学一定发现了，动画效果都有一个小的抖动，更加添加的动画的平顺性，动画都不是到了你设置的位置就停止的，好
像有种刹不住车的感觉，哈哈，进行了一个回弹，同理，注意图标的大小，他不是到设置的transform: scale(1)的大小。而是到
了1继续变大然后再缩回1，动画效果比较好看。
还有一个细节，有没有人有疑问为什么btn:before移到了上面图标为什么没有被遮盖，这是因为设置了position：relative;设置了
该属性默认在图层最上层。这些都可以成为日常开发的细节，很实用，大家一起学起来。
好了，到这边结束了，我是不会编程的灌篮作家，喜欢的话加个关注。谢谢大家，看到这。
由于想让各位看的更加清除调慢了动画速度，最后我们把速度调回正常来看一下最后的效果。
好看的效果出来了
源代码贴在下面了
hoverButtonTest.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Stylish Social Buttons</title>
<!--图标库-->
<link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
<!--核心样式-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="social-btns">
<a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="btn google" href="#"><i class="fa fa-google"></i></a>
<a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
<a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>
</body>
</html>
style.css
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#eee;}
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
transition: all 0.5s;
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
top: 80%;
left: -120%;
}
.social-btns .btn .fa {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn.twitter:before {
background-color: #00aff0;
}
.social-btns .btn.twitter .fa {
color: #00aff0;
}
.social-btns .btn.google:before {
background-color: #dc4a38;
}
.social-btns .btn.google .fa {
color: #dc4a38;
}
.social-btns .btn.instagram:before {
background-color: #bf00ff;
}
.social-btns .btn.instagram .fa {
color: #bf00ff;
}
.social-btns .btn.pinterest:before {
background-color: #cc0000;
}
.social-btns .btn.pinterest .fa {
color: #cc0000;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -20%;
left: -20%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
.social-btns {
height: 90px;
margin: auto;
font-size:0;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.social-btns .btn {
display: inline-block;
background-color: #fff;
width: 90px;
height: 90px;
line-height: 90px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
border-radius: 8%;
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
opacity: 0.99;
}
.social-btns .btn:before {
content:"";
width: 142%;
height: 142%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.social-btns .btn .fa {
font-size: 38px;
vertical-align: middle;
}
//transform 会有一个抖动
//position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
就在页面的中央
//relative定位永远显示在上层
//改变背景颜色的抖动主要改变：before的大小即位置
//也一定要改变运动后的位置。
//先设置font-size:0
//再设置好margin 和 position 会产生一个弹出的效果 chrome edge中没有
