码迷,mamicode.com
首页 > Web开发 > 详细

一款纯css3实现的鼠标经过按钮特效

时间:2014-10-24 09:12:16      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   for   sp   

今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单,但效果很好,非常漂亮。一起看下效果图:

bubuko.com,布布扣

在线预览   源码下载

实现的代码。

html代码:

 <div align="center">
        <div class="contener">
            <div class="txt_button">
                WIFEO</div>
            <div class="circle">
                &nbsp;</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实现的鼠标经过按钮特效

标签:style   blog   http   color   io   os   ar   for   sp   

原文地址:http://www.cnblogs.com/liaohuolin/p/4047365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!