纯css3实现的鼠标悬停动画按钮

最新推荐文章于 2021-06-04 11:32:24 发布

weixin_33754913

最新推荐文章于 2021-06-04 11:32:24 发布

阅读量135

点赞数

今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下：

在线预览源码下载

实现的代码。

html代码：

<div>
        <span></span>
    </div>

css3代码：

 body
        {
            background-color: #333;
        }
        div
        {
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        span
        {
            position: relative;
            width: 180px;
            height: 180px;
            display: block;
            margin: auto;
            top: 25px;
            border: 20px solid rgba(255, 255, 0, .25);
            background-color: rgba(124,155,13,1);
            -webkit-transition: .5s;
            -moz-transition: .5s;
            -ms-transition: .5s;
            transition: .5s;
            border-radius: 30px 0px 30px 0px;
        }
        span:before, span:after
        {
            position: absolute;
            display: block;
            background-color: #fff;
            border-radius: 10px;
            margin: auto;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }
        span:before
        {
            width: 100px;
            height: 10px;
            content: "";
        }
        
        span:after
        {
            width: 10px;
            height: 100px;
            content: "";
        }
        
        div:hover span
        {
            -webkit-transform: scale(.5) rotate(45deg);
            -moz-transform: scale(.5) rotate(45deg);
            -ms-transform: scale(.5) rotate(45deg);
            transform: scale(.5) rotate(45deg);
            border-radius: 110px;
            background-color: rgba(112,18,255,1);
        }