纯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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 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/11/23 PHP
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
先进党支部事迹材料
2014/01/13 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
法律进机关实施方案
2014/03/12 职场文书
销售总经理岗位职责
2014/03/15 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
集体生日活动方案
2014/08/18 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
青年文明号申报材料
2014/12/23 职场文书
课外活动总结
2015/02/04 职场文书
培训班通知
2015/04/25 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python