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

网络整理 - 07-23

之前介绍过很多款css3实现的鼠标悬停特效,今天再和大家分享一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形。感兴趣的朋友可以进来学习一下

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


(点小图查看大图)

  实现的代码。

  html代码:

复制内容到剪贴板

<div>  

        <span></span>  

    </div>  

  css3代码:

CSS Code复制内容到剪贴板

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;   

            bottombottom: 0px;   

            left: 0px;   

            rightright: 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);   

        }