CSS3 学习笔记——鼠标滑过按钮特效（一）

最新推荐文章于 2023-12-01 12:58:10 发布

じоνё靁〃

最新推荐文章于 2023-12-01 12:58:10 发布

阅读量689

点赞数 1

分类专栏： Web前端开发相关 JavaScript、CSS、HTML

本文链接：https://blog.csdn.net/jingliuting/article/details/88871967

版权

JavaScript、CSS、HTML 同时被 2 个专栏收录

38 篇文章 10 订阅

订阅专栏

Web前端开发相关

3 篇文章 0 订阅

订阅专栏

鼠标滑过按钮特效（一）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮特效</title>
<style>
    #container{
        width:450px;
        margin:50px auto;
    }
    .btn{
        outline: none;
        cursor:pointer;
        position: relative;
        width:100px;
        height:40px;
        border-radius:5px;
        text-align:center;
        line-height: 40px;
        font-size:18px;
        color:#fff;
        overflow: hidden;
    }
    .btn.btn-primary{
         background-color:#337ab7;
         border:1px solid #337ab7;
    }
    .btn.btn-secondary{
        border:1px solid #5bc0de;
        background-color:#5bc0de;
    }
    .btn.btn-warning{
        border:1px solid #f0ad4e;
        background-color:#f0ad4e;
    }
    .btn.btn-success{
        border:1px solid #5cb85c;
        background-color:#5cb85c;
    }
    .btn .mask{
        position:absolute;
        opacity: 1;
        background-color:#fff;
     }

    .btn .mask.to-left{
        height:100%;
        width:0;
        right:0px;
     }    
    .btn .mask.to-right{
        height:100%;
        width:0px;
        left:0px;
        border-top-right-radius: 40px;
     }    
    .btn .mask.to-spread{
        height:0%;
        width:0px;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        border-radius: 5px;
     }    
    .btn .mask.to-top{
        width:100%;
        height:0px;
        bottom:0px;
        left:0px;
     }
    .btn.btn-primary:hover span.mask{
        animation:btn-to-left 1s;
    } 
    .btn.btn-secondary:hover span.mask{
        animation:btn-to-right 1s;
    } 
    .btn.btn-warning:hover span.mask{
        animation:btn-to-spread 1s 1;
    } 
    .btn.btn-success:hover span.mask{
        animation:btn-to-top 1s 1;
    } 
    @keyframes btn-to-left{
        from{
            width:0px;
            opacity:1;
        }
        to{
            width:100%;
            opacity:0;
        }
    } 
    @keyframes btn-to-right{
        from{
            width:0px;
            opacity:1;
        }
        to{
            width:100%;
            opacity:0;
        }
    }     
    @keyframes btn-to-spread{
        from{
            width:0%;
            height:0%;
            opacity:1;
        }
        to{
            width:100%;
            height:200%;
            opacity:0;
        }
    }     
    @keyframes btn-to-top{
        from{
            height:0%;
            opacity:1;
        }
        to{
            height:100%;
            opacity:0;
        }
    }  
</style>
</head>
<body>
    <div id='container'>
        <button class='btn btn-primary'>按钮一
            <span class="mask to-left"></span>
        </button>
        <button class='btn btn-secondary'>按钮二
            <span class="mask to-right"></span>
        </button>
        <button class='btn btn-warning'>按钮三
            <span class="mask to-spread"></span>
        </button>
        <button class='btn btn-success'>按钮四
            <span class="mask to-top"></span>
        </button>
    </div>
</body>
</html>

じоνё靁〃

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3 学习笔记——鼠标滑过按钮特效（一）

鼠标滑过按钮特效（一）<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫