一款纯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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
实例讲解php实现多线程
2019/01/27 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
python基础 range的用法解析
2019/08/23 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
Pytorch之parameters的使用
2019/12/31 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
初中生期末评语大全
2014/04/24 职场文书
关于安全的演讲稿
2014/05/09 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
初三毕业评语
2014/12/26 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python