首页 > 代码库 > 一款纯css3实现的鼠标经过按钮特效
一款纯css3实现的鼠标经过按钮特效
今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图：
在线预览 源码下载
实现的代码。
html代码：
<div align="center"> <div class="contener"> <div class="txt_button"> WIFEO</div> <div class="circle"> </div> </div> </div>
css3代码：
.contener{ width: 300px; height: 60px; background-color: #00bcd4; line-height: 60px; color: #ffffff; font-weight: 300; font-family: ‘Roboto‘; font-size: 25px; position: relative; overflow: hidden; cursor: pointer; box-shadow:1px 1px 1px #333333;}.txt_button{ position: absolute; width: 100%;}.contener:hover .circle{ -webkit-animation:oblik 0.4s ease-in; -webkit-transform-origin: 50% 50%; -moz-animation:oblik 0.4s ease-in; -moz-transform-origin: 50% 50%; -ms-animation:oblik 0.4s ease-in; -ms-transform-origin: 50% 50%; animation:oblik 0.4s ease-in; transform-origin: 50% 50%; width: 100px; height: 100px; border-radius: 50%; }@-webkit-keyframes oblik { 0% {opacity:1;-webkit-transform:scale(0);} 100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;} }@-moz-keyframes oblik { 0% {opacity:1;-moz-transform:scale(0);} 100% {opacity:0;-moz-transform:scale(5);background-color: #006064;} }@-ms-keyframes oblik { 0% {opacity:1;-ms-transform:scale(0);} 100% {opacity:0;-ms-transform:scale(5);background-color: #006064;} }@keyframes oblik { 0% {opacity:1;transform:scale(0);} 100% {opacity:0;transform:scale(5);background-color: #006064;} }
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9086
一款纯css3实现的鼠标经过按钮特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。