一款纯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 弹性布局快速入门
Jun 06 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python数组循环处理方法
2019/08/26 Python
详解Python self 参数
2019/08/30 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
python中os包的用法
2020/06/01 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
元旦晚会策划方案
2014/02/18 职场文书
团代会主持词
2014/04/02 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
护士实习求职信
2014/06/22 职场文书
公共场所禁烟标语
2014/06/25 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
教师批评与自我批评
2014/10/15 职场文书
给医院的感谢信
2015/01/21 职场文书
2016年少先队活动总结
2016/04/06 职场文书