一款纯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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
使用CSS实现六边形的图片效果
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
中国收音机工业发展史
2021/03/02 无线电
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
node.js集成百度UE编辑器
2015/02/05 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
pygame加载中文名mp3文件出现error
2017/03/31 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
python实现取余操作的简单实例
2020/08/16 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
手机业务员岗位职责
2013/12/13 职场文书
中学运动会广播稿
2014/01/19 职场文书
温馨提示标语
2014/06/26 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书