分享好友 前端技术首页 频道列表

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

css教程  2015-11-06 12:580

　　今天再给大家带来一款纯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.   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:1px 1px 1px #333333;   
  15. }   
  16. .txt_button   
  17. {   
  18.   position: absolute;   
  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.   width: 100px;   
  32.   height: 100px;   
  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实现的鼠标经过按钮特效，谢谢阅读，希望能帮到大家，请继续关注乐学网（lexue001.com），我们会努力分享更多优秀的文章。

查看更多关于【css教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
纯css3代码写九宫格效果 css九宫格 图片布局
主要用到css3中的transition和布局知识。代码如下1 !DOCTYPE html2 html lang="en"3 head4 meta charset="UTF-8"5 meta name=""6 title标题/title7 /head8 style type="text/css"9 *{margin: 0;padding: 0;} 10 body{background: url(images/bg.jpg);}

0评论2023-03-08797

【原创】使用纯CSS3制作一个无限循环的动画
实际效果：@-webkit-keyframes gogogo {0%{-webkit-transform: rotate(0deg); border:5px solid red;}50%{-webkit-transform: rotate(180deg);background:black; border:5px solid yellow;}100%{-webkit-transform: rotate(360deg);background:white; border:

0评论2023-03-08972

[原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画，心血来潮实现了一个心目中自己设计的翻页效果的3D动画，页面纯CSS3，目前只能在Chrome中玩，理论上可以支持Safari。1. 新建HTML，代码如下（数据和翻页后的数据都是瞎模拟的）!doctype htmlheadmeta charset="utf-8"titleCSS3 Animation/titl

0评论2023-02-08525

纯CSS3实现8组超炫酷鼠标滑过图片动画
这篇文章主要为大家分享了8组超炫酷纯CSS3鼠标滑过图片动画效果，每一个动画效果都很精彩，值得大家学习借鉴，感兴趣的小伙伴们可以参考一下

0评论2016-04-27145

纯CSS3打造属于自己的“小黄人”
这篇文章主要为大家详细介绍了纯CSS3打造属于自己的“小黄人”的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

0评论2016-04-27131

纯CSS3代码实现文字描边
CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果，本文给大家介绍纯CSS3代码实现文字描边，需要的朋友参考下

0评论2016-04-27129

非常震撼的纯CSS3人物行走动画
这篇文章主要介绍了一款非常震撼的纯CSS3人物行走动画，利用CSS3技术将人物行走的姿态描绘得非常逼真，感兴趣的小伙伴们可以参考一下

0评论2016-03-12115

更多推荐