一款纯css3实现的鼠标悬停动画按钮


Posted in HTML / CSS onDecember 29, 2014

今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形。效果图如下:

一款纯css3实现的鼠标悬停动画按钮

实现的代码。

html代码:

复制内容到剪贴板
  1. <div>  
  2.         <span></span>  
  3.     </div>  

css3代码:

CSS Code复制内容到剪贴板
  1. body   
  2.         {   
  3.             background-color#333;   
  4.         }   
  5.         div   
  6.         {   
  7.             width200px;   
  8.             height200px;   
  9.             margin: 0 auto;   
  10.         }   
  11.         span   
  12.         {   
  13.             positionrelative;   
  14.             width180px;   
  15.             height180px;   
  16.             displayblock;   
  17.             marginauto;   
  18.             top25px;   
  19.             border20px solid rgba(255, 255, 0, .25);   
  20.             background-color: rgba(124,155,13,1);   
  21.             -webkit-transition: .5s;   
  22.             -moz-transition: .5s;   
  23.             -ms-transition: .5s;   
  24.             transition: .5s;   
  25.             border-radius: 30px 0px 30px 0px;   
  26.         }   
  27.         span:before, span:after   
  28.         {   
  29.             positionabsolute;   
  30.             displayblock;   
  31.             background-color#fff;   
  32.             border-radius: 10px;   
  33.             marginauto;   
  34.             top0px;   
  35.             bottombottom0px;   
  36.             left0px;   
  37.             rightright0px;   
  38.         }   
  39.         span:before   
  40.         {   
  41.             width100px;   
  42.             height10px;   
  43.             content"";   
  44.         }   
  45.            
  46.         span:after   
  47.         {   
  48.             width10px;   
  49.             height100px;   
  50.             content"";   
  51.         }   
  52.            
  53.         div:hover span   
  54.         {   
  55.             -webkit-transform: scale(.5) rotate(45deg);   
  56.             -moz-transform: scale(.5) rotate(45deg);   
  57.             -ms-transform: scale(.5) rotate(45deg);   
  58.             transform: scale(.5) rotate(45deg);   
  59.             border-radius: 110px;   
  60.             background-color: rgba(112,18,255,1);   
  61.         }  
HTML / CSS 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 #HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 #HTML / CSS
纯css3实现照片墙效果
Dec 26 #HTML / CSS
纯css3实现走马灯效果
Dec 26 #HTML / CSS
纯CSS3实现的阴影效果
Dec 24 #HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 #HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 #HTML / CSS
You might like
第二节 对象模型 [2]
2006/10/09 PHP
JS Array对象入门分析
2008/10/30 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
快速了解Python开发环境Spyder
2020/06/29 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
银行求职信
2014/05/31 职场文书
2014年法务工作总结
2014/12/11 职场文书
老公出轨后的保证书
2015/05/08 职场文书
法律意见书范本
2015/06/04 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Python实现8种常用抽样方法
2021/06/27 Python
MySQL如何解决幻读问题
2021/08/07 MySQL