今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
立即学习“前端免费学习笔记（深入）”；
登录后复制
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); }
登录后复制
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
