一款纯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 相关文章推荐
html+css3实现的登录界面
Dec 09 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
CSS完成视差滚动效果
Apr 27 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
mysql 性能的检查和优化方法
2009/06/21 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
独特的python循环语句
2016/11/20 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Python单元测试与测试用例简析
2019/11/09 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
梅花魂教学反思
2014/04/25 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
购房委托书范本
2014/09/18 职场文书
员工考勤管理制度
2015/08/06 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js