手机软件下载网站,微信公众号创建需要多少钱,aso优化平台有哪些,太原网站制作小程序今天给大家带来一款纯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