一款纯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实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 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简单系统查询模块代码打包下载
2008/06/07 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python实时监控cpu小工具
2018/06/21 Python
python读取并写入mat文件的方法
2019/07/12 Python
Python谱减法语音降噪实例
2019/12/18 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python str字符串转uuid实例
2020/03/03 Python
三八妇女节演讲稿
2014/05/27 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
奖励申请报告范文
2015/05/15 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
python_tkinter弹出对话框创建
2022/03/20 Python
MySQL分区表管理命令汇总
2022/03/21 MySQL
Nginx 匹配方式
2022/05/15 Servers
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技