纯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绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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
写一个用户在线显示的程序
2006/10/09 PHP
杏林同学录(二)
2006/10/09 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python 函数传参之传值还是传引用的分析
2017/09/07 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
婚前保证书
2014/04/29 职场文书
慰问信格式规范
2015/03/23 职场文书
小学生安全保证书
2015/05/09 职场文书
篮球赛新闻稿
2015/07/17 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
入党申请书怎么写?
2019/06/11 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
mysql批量新增和存储的方法实例
2021/04/07 MySQL
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技