一款纯css3如何实现的鼠标经过按钮特效好代码教程

互联网
一弯拱桥对映着一弯晓月，桥下流水波光粼粼，昙花一般的月，在我眼中异香腾风，秀色媚景。夜的静谧是风景，昼的明媚是风景。江花胜火红，寒山伤心碧，空伫玉阶白，西风残照黄。处处皆风景，处处皆绝妙风景。

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divalign="center">
  2. <divclass="contener">
  3. <divclass="txt_button">
  4. WIFEO</div>
  5. <divclass="circle">
  6. </div>
  7. </div>
  8. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. .contener
  2. {
  3. width:300px;
  4. height:60px;
  5. background-color:#00bcd4;
  6. line-height:60px;
  7. color:#ffffff;
  8. font-weight:300;
  9. font-family:'Roboto';
  10. font-size:25px;
  11. position:relative;
  12. overflow:hidden;
  13. cursor:pointer;
  14. box-shadow:1px1px1px#333333;
  15. }
  16. .txt_button
  17. {
  18. position:absolute;
  19. width:100%;
  20. }
  21. .contener:hover.circle
  22. {
  23. -webkit-animation:oblik0.4sease-in;
  24. -webkit-transform-origin:50%50%;
  25. -moz-animation:oblik0.4sease-in;
  26. -moz-transform-origin:50%50%;
  27. -ms-animation:oblik0.4sease-in;
  28. -ms-transform-origin:50%50%;
  29. animation:oblik0.4sease-in;
  30. transform-origin:50%50%;
  31. width:100px;
  32. height:100px;
  33. border-radius:50%;
  34. }
  35. @-webkit-keyframesoblik{
  36. 0%{opacity:1;-webkit-transform:scale(0);}
  37. 100%{opacity:0;-webkit-transform:scale(5);background-color:#006064;}
  38. }
  39. @-moz-keyframesoblik{
  40. 0%{opacity:1;-moz-transform:scale(0);}
  41. 100%{opacity:0;-moz-transform:scale(5);background-color:#006064;}
  42. }
  43. @-ms-keyframesoblik{
  44. 0%{opacity:1;-ms-transform:scale(0);}
  45. 100%{opacity:0;-ms-transform:scale(5);background-color:#006064;}
  46. }
  47. @keyframesoblik{
  48. 0%{opacity:1;transform:scale(0);}
  49. 100%{opacity:0;transform:scale(5);background-color:#006064;}
  50. }

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

您可能有感兴趣的文章
基于CSS 判断鼠标进入的方向
CSS如何实现鼠标移至图片上显示遮罩层效果
html+css+javascript如何实现跟随鼠标移动显示选中效果
如何利用HTML+CSS如何实现跟踪鼠标移动功能
详解CSS如何实现仿Windows10鼠标照亮边框效果