一款纯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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
css3学习之2D转换功能详解
Dec 23 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 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实现图片等比例缩放代码
2015/07/23 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
详解python中各种文件打开模式
2020/01/19 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
C++面试题目
2013/06/25 面试题
电脑饰品店的创业计划书
2014/01/21 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
医学专业大学生求职信
2014/07/12 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
医德医风自我评价2015
2015/03/03 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫