首页 > 代码库 > 纯css3实现的鼠标悬停动画按钮
纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯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); }
via:http://www.w2bc.com/Article/13275
纯css3实现的鼠标悬停动画按钮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。