一款纯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教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 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
第十四节--命名空间
2006/11/16 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php对数组排序的简单实例
2013/12/25 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
JS event使用方法详解
2008/04/28 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
js实现拖拽效果
2015/02/12 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
PyMongo安装使用笔记
2015/04/27 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Django框架表单操作实例分析
2019/11/04 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
养殖人员的创业计划书范文
2013/12/26 职场文书
销售内勤岗位职责
2014/04/15 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
毕业酒会致辞
2015/07/29 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
详细了解MVC+proxy
2021/07/09 Java/Android
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
Go语言编译原理之源码调试
2022/08/05 Golang