效果图
一.导入图形库 添加后在IDE上直接下载即可
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"/>
二.
1.输出图标
<i class="fa fa-facebook"></i>
二.在i的外部加上<a>便签 方便css的样式操作
<a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
三.css样式操作
1.多类选择器和后代选择器
.social-btns .btn.pinterest .fa{}
相应的class
class="btn pinterest" //多类选择器的固定写法 中间要空格
2.为实现视觉上的缩放 ,先将原先的图标缩小到自身的0.8 鼠标悬停后再还原
.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);
}
3.对按钮设置旋转(实现更丰富的效果)
.social-btns .btn:before {
content: '';
width: 120%;
height: 120%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
4..利用before选择器进行背景的填充
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn.twitter:before {
background-color: #00aff0;
}
.social-btns .btn.instagram:before {
background-color: #bf00ff;
}
.social-btns .btn.google:before {
background-color: #dc4a38;
}
.social-btns .btn.pinterest:before {
background-color: #cc0000;
}
5.设置过渡效果
其中transition-timing-function有liner,cubic-bezier(自定义变化)等过渡函数
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
transition: all 0.35s;/*过渡效果*/
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);/*速度呈曲线变化*/
6.完整源码:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS实现社交分享按钮动画</title>
<!--图标库-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.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>
css:
* {
margin: 0;
padding: 0;
}
a,
img {
border: 0;
}
body {
background: #eee;
}
.social-btns .btn.facebook .fa {
color: #3b5998;
}
.social-btns .btn.twitter .fa {
color: #00aff0;
}
.social-btns .btn.google .fa {
color: #dc4a38;
}
.social-btns .btn.instagram .fa {
color: #bf00ff;
}
.social-btns .btn.pinterest .fa {
color: #cc0000;
}
.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);
}
*.social-btns .btn .fa {
font-size: 38px;
vertical-align: middle;
}
.social-btns {
height: 90px;
margin: 80px auto;
font-size: 0;
text-align: center;
}
.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: 28%;
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
opacity: 0.99;
}
.social-btns .btn:before {
top: 90%;
left: -110%;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -10%;
left: -10%;
}
.social-btns .btn:before {
content: '';
width: 120%;
height: 120%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn.twitter:before {
background-color: #00aff0;
}
.social-btns .btn.instagram:before {
background-color: #bf00ff;
}
.social-btns .btn.google:before {
background-color: #dc4a38;
}
.social-btns .btn.pinterest:before {
background-color: #cc0000;
}
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
transition: all 0.35s;
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);/*速度呈曲线变化*/
}