您现在的位置是：网站首页> 编程资料编程资料

一款纯css3实现的鼠标悬停动画按钮纯CSS3实现的鼠标悬停图标旋转导航动画特效源码纯css3实现的鼠标悬停背景翻转动画导航特效源码一款纯CSS3实现的鼠标悬停动画按钮集合特效源码 HTML5+CSS3实现的鼠标悬停动画菜单按钮特效源码 纯css3实现的鼠标悬停动画按钮一款基于CSS3实现的鼠标悬停图片动画及多种文字动画效果源码31款纯css3实现的鼠标悬停动画效果源码纯CSS3实现的鼠标悬停图片文字动画效果源码CSS3鼠标悬停动画显示文字特效源码

2021-09-05 992人已围观

简介 之前介绍过很多款css3实现的鼠标悬停特效，今天再和大家分享一款纯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.             width: 200px;   
  8.             height: 200px;   
  9.             margin: 0 auto;   
  10.         }   
  11.         span   
  12.         {   
  13.             position: relative;   
  14.             width: 180px;   
  15.             height: 180px;   
  16.             display: block;   
  17.             margin: auto;   
  18.             top: 25px;   
  19.             border: 20px 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.             position: absolute;   
  30.             display: block;   
  31.             background-color: #fff;   
  32.             border-radius: 10px;   
  33.             margin: auto;   
  34.             top: 0px;   
  35.             bottombottom: 0px;   
  36.             left: 0px;   
  37.             rightright: 0px;   
  38.         }   
  39.         span:before   
  40.         {   
  41.             width: 100px;   
  42.             height: 10px;   
  43.             content: "";   
  44.         }   
  45.            
  46.         span:after   
  47.         {   
  48.             width: 10px;   
  49.             height: 100px;   
  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.         }  

上一篇：一款纯css3制作的2015年元旦雪人动画特效教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

下一篇：CSS制作清爽绿色格调图文box通用样式CSS 网页图文混排的10个技巧CSS 网页布局中的图文列表实现代码javascript+CSS 联合打造图文结合动感菜单div css图文混排列表设计中的基础问题总结

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网