宜宾网站建设公司

如何用css3实现鼠标悬停动画按钮

这篇文章主要介绍“如何用css3实现鼠标悬停动画按钮”，在日常操作中，相信很多人在如何用css3实现鼠标悬停动画按钮问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用css3实现鼠标悬停动画按钮”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

目前创新互联已为近千家的企业提供了网站建设、域名、网络空间、成都网站托管、企业网站设计、瓯海网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下：

如何用css3实现鼠标悬停动画按钮

实现的代码。

html代码：

复制内容到剪贴板

  1.   

  2.           

  3.     

  

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实现鼠标悬停动画按钮”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


网站栏目：如何用css3实现鼠标悬停动画按钮
转载来于：http://ybzwz.com/article/gcohhj.html

其他资讯