如何用css3實(shí)現(xiàn)鼠標(biāo)懸停動(dòng)畫(huà)按鈕

這篇文章主要介紹“如何用css3實(shí)現(xiàn)鼠標(biāo)懸停動(dòng)畫(huà)按鈕”，在日常操作中，相信很多人在如何用css3實(shí)現(xiàn)鼠標(biāo)懸停動(dòng)畫(huà)按鈕問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何用css3實(shí)現(xiàn)鼠標(biāo)懸停動(dòng)畫(huà)按鈕”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

　　今天給大家?guī)?lái)一款純css3實(shí)現(xiàn)的鼠標(biāo)懸停動(dòng)畫(huà)按鈕。這款按鈕鼠標(biāo)經(jīng)過(guò)前以正方形的形式，當(dāng)鼠標(biāo)經(jīng)過(guò)的時(shí)候以動(dòng)畫(huà)的形式變成圓形。效果圖如下：

　　實(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.             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.         }  

到此，關(guān)于“如何用css3實(shí)現(xiàn)鼠標(biāo)懸停動(dòng)畫(huà)按鈕”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！