欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一款純css3實(shí)現(xiàn)的鼠標(biāo)懸停動(dòng)畫按鈕

  發(fā)布時(shí)間:2014-12-29 10:48:16   作者:佚名   我要評(píng)論
之前介紹過很多款css3實(shí)現(xiàn)的鼠標(biāo)懸停特效,今天再和大家分享一款純css3實(shí)現(xiàn)的鼠標(biāo)懸停動(dòng)畫按鈕。這款按鈕鼠標(biāo)經(jīng)過前以正方形的形式,當(dāng)鼠標(biāo)經(jīng)過的時(shí)候以動(dòng)畫的形式變成圓形。感興趣的朋友可以進(jìn)來學(xué)習(xí)一下

  今天給大家?guī)硪豢罴僣ss3實(shí)現(xiàn)的鼠標(biāo)懸停動(dòng)畫按鈕。這款按鈕鼠標(biāo)經(jīng)過前以正方形的形式,當(dāng)鼠標(biāo)經(jīng)過的時(shí)候以動(dòng)畫的形式變成圓形。效果圖如下:

  實(shí)現(xiàn)的代碼。

  html代碼:

復(fù)制內(nèi)容到剪貼板
  1. <div>  
  2.         <span></span>  
  3.     </div>  

  css3代碼:

CSS Code復(fù)制內(nèi)容到剪貼板
  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.         }  

相關(guān)文章

最新評(píng)論