一款纯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的方法
Aug 29 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
js数组操作常用方法
2014/05/08 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
python 容器总结整理
2017/04/04 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
手把手教你python实现SVM算法
2017/12/27 Python
python nmap实现端口扫描器教程
2020/05/28 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
党员的自我评价范文
2014/01/02 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
四年级作文之植物
2019/09/20 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技