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


Posted in HTML / CSS onNovember 09, 2014

今天再给大家带来一款纯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实现的鼠标经过按钮特效,谢谢阅读,希望能帮到大家,请继续关注三水点靠木,我们会努力分享更多优秀的文章。

HTML / CSS 相关文章推荐
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 #HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 #HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 #HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 #HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 #HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 #HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 #HTML / CSS
You might like
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
js转义字符介绍
2013/11/05 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
2013年员工自我评价范文
2013/12/27 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
消防演习感想
2015/08/10 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技