CSS实现动态按钮

效果图

 一.导入图形库 添加后在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);/*速度呈曲线变化*/
}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值