CSS实现动态按钮

厦门摩块诗信息科技

于 2021-09-24 22:43:21 发布

阅读量641

点赞数 2

分类专栏：前端文章标签： jquery 动画 1024程序员节

本文链接：https://blog.csdn.net/qq_52124121/article/details/120431663

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

一.导入图形库添加后在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
评论
CSS实现动态按钮

1.animate（）函数使用$(selector).animate(styles,speed,easing,callback)分析:1.导入Jquery地址<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="jquery.color.js"></script>我的github下载地址：...
复制链接

扫一扫