纯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 相关文章推荐
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
自制PHP框架之设计模式
2017/05/07 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
php常用的工具开发整理
2019/09/26 PHP
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
美国NBA官方商店:NBA Store
2019/04/12 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python
mysql sql常用语句大全
2022/06/21 MySQL