网站开发百灵鸟优化,最近的国际新闻热点,wordpress制作评论,网站建设推广话术今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式#xff0c;当鼠标经过的时候以动画的形式变成圆形。效果图如下#xff1a; 在线预览 源码下载 实现的代码。 html代码#xff1a; divspan/span/div …今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式当鼠标经过的时候以动画的形式变成圆形。效果图如下 在线预览 源码下载 实现的代码。 html代码 divspan/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);} via:http://***/Article/13275
