欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-13 09:22:29
这篇文章主要为大家介绍了利用css3制作的一款鼠标经过按钮特效,当鼠标放在按钮上,按钮就会发生变化,产生一个动态效果,非常漂亮。需要的朋友可以参考下... 14-11-09...

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

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

  实现的代码。

  html代码:

xml/html code复制内容到剪贴板
  1. <div align="center">  
  2.        <div class="contener">  
  3.            <div class="txt_button">  
  4.                wifeo</div>  
  5.            <div class="circle">  
  6.                 </div>  
  7.        </div>  
  8.    </div>  

  css3代码:

css code复制内容到剪贴板
  1. .contener   
  2. {   
  3.   width300px;   
  4.   height60px;   
  5.   background-color#00bcd4;   
  6.   line-height60px;   
  7.   color#ffffff;   
  8.   font-weight: 300;   
  9.   font-family'roboto';   
  10.   font-size25px;   
  11.   positionrelative;   
  12.   overflowhidden;   
  13.   cursorpointer;   
  14.   box-shadow:1px 1px 1px #333333;   
  15. }   
  16. .txt_button   
  17. {   
  18.   positionabsolute;   
  19.   width: 100%;   
  20. }   
  21. .contener:hover .circle  
  22. {   
  23.   -webkit-animation:oblik 0.4s ease-in;   
  24.   -webkit-transform-origin: 50% 50%;   
  25.   -moz-animation:oblik 0.4s ease-in;   
  26.   -moz-transform-origin: 50% 50%;   
  27.   -ms-animation:oblik 0.4s ease-in;   
  28.   -ms-transform-origin: 50% 50%;   
  29.   animation:oblik 0.4s ease-in;   
  30.   transform-origin: 50% 50%;   
  31.   width100px;   
  32.   height100px;   
  33.   border-radius: 50%;    
  34. }   
  35. @-webkit-keyframes oblik {   
  36.   0% {opacity:1;-webkit-transform:scale(0);}   
  37.   100% {opacity:0;-webkit-transform:scale(5);background-color#006064;}      
  38. }   
  39. @-moz-keyframes oblik {   
  40.   0% {opacity:1;-moz-transform:scale(0);}   
  41.   100% {opacity:0;-moz-transform:scale(5);background-color#006064;}      
  42. }   
  43. @-ms-keyframes oblik {   
  44.   0% {opacity:1;-ms-transform:scale(0);}   
  45.   100% {opacity:0;-ms-transform:scale(5);background-color#006064;}      
  46. }   
  47. @keyframes oblik {   
  48.   0% {opacity:1;transform:scale(0);}   
  49.   100% {opacity:0;transform:scale(5);background-color#006064;}      
  50. }  

  以上就是今天带给大家的一款纯css3实现的鼠标经过按钮特效,谢谢阅读,希望能帮到大家,请继续关注,我们会努力分享更多优秀的文章。