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


Posted in HTML / CSS onDecember 23, 2014

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

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

实现的代码。

html代码:

复制代码
代码如下:

<div>
<span></span>
</div>

css3代码:

复制代码
代码如下:

body
{
background-color: #333;
}
div
{
width: 200px;
height: 200px;
margin: 0 auto;
}
span
{
position: relative;
width: 180px;
height: 180px;
display: block;
margin: auto;
top: 25px;
border: 20px solid rgba(255, 255, 0, .25);
background-color: rgba(124,155,13,1);
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
transition: .5s;
border-radius: 30px 0px 30px 0px;
}
span:before, span:after
{
position: absolute;
display: block;
background-color: #fff;
border-radius: 10px;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
span:before
{
width: 100px;
height: 10px;
content: "";
}
span:after
{
width: 10px;
height: 100px;
content: "";
}
div:hover span
{
-webkit-transform: scale(.5) rotate(45deg);
-moz-transform: scale(.5) rotate(45deg);
-ms-transform: scale(.5) rotate(45deg);
transform: scale(.5) rotate(45deg);
border-radius: 110px;
background-color: rgba(112,18,255,1);
}

非常棒的鼠标悬停特效吧,最重要的是完全是纯CSS3来实现的,小伙伴们自由发挥下,用到自己的项目中去吧

HTML / CSS 相关文章推荐
CSS3——齿轮转动关键代码
May 02 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
css3实现3D色子翻转特效
Dec 23 #HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 #HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 #HTML / CSS
css3选择器基本介绍
Dec 15 #HTML / CSS
css3的transition属性详解
Dec 15 #HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 #HTML / CSS
CSS3简单实现照片墙
Dec 12 #HTML / CSS
You might like
PHP邮件专题
2006/10/09 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
jquery实现拖拽小方块效果
2020/12/10 jQuery
使用PYTHON接收多播数据的代码
2012/03/01 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
什么是python的列表推导式
2020/05/26 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
在校生自我鉴定
2014/01/23 职场文书
公司董事长岗位职责
2014/06/08 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
治庸问责心得体会
2014/09/12 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
党支部季度考核意见
2015/06/02 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers