CSS3怎么實現按鈕動畫

這篇文章主要介紹“CSS3怎么實現按鈕動畫”，在日常操作中，相信很多人在CSS3怎么實現按鈕動畫問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3怎么實現按鈕動畫”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

這是一款非常有特點的CSS3按鈕，按鈕的背景不是北京圖片，也不是單純的顏色，而是一組魔幻般的冒泡背景動畫。當我們將鼠標滑過按鈕時，按鈕的冒泡背景動畫就可以展示出來。可以說這款CSS3按鈕的設計風格相當有創意，而且令人驚嘆的是，這些動畫都是用CSS3實現的，并沒有使用JavaScript，非常強大。

HTML代碼：

XML/HTML Code復制內容到剪貼板

1. <div id="buttonContainer">  

2.   

3.     <a href="#" class="button big blue">Big Button</a>  

4.     <a href="#" class="button big green">Big Button</a>  

5.     <a href="#" class="button big orange">Big Button</a>  

6.     <a href="#" class="button big gray">Big Button</a>  

7.   

8.     <a href="#" class="button blue medium">Medium Button</a>  

9.     <a href="#" class="button green medium">Medium Button</a>  

10.     <a href="#" class="button orange medium">Medium Button</a>  

11.     <a href="#" class="button gray medium">Medium Button</a>  

12.   

13.     <a href="#" class="button small blue">Small Button</a>  

14.     <a href="#" class="button small green">Small Button</a>  

15.     <a href="#" class="button small blue rounded">Rounded</a>  

16.   

17.     <a href="#" class="button small orange">Small Button</a>  

18.     <a href="#" class="button small gray">Small Button</a>  

19.   

20.     <a href="#" class="button small green rounded">Rounded</a>  

21.   

22. </div>  

CSS代碼：

CSS Code復制內容到剪貼板

1. .button{   

2.  font:15px Calibri, Arial, sans-serif;   

3.   

4.  /* A semi-transparent text shadow */  

5.  text-shadow:1px 1px 0 rgba(255,255,255,0.4);   

6.   

7.  /* Overriding the default underline styling of the links */  

8.  text-decoration:none !important;   

9.  whitewhite-space:nowrap;   

10.   

11.  display:inline-block;   

12.  vertical-align:baselinebaseline;   

13.  position:relative;   

14.  cursor:pointer;   

15.  padding:10px 20px;   

16.   

17.  background-repeat:no-repeat;   

18.   

19.  /* The following two rules are fallbacks, in case  

20.     the browser does not support multiple backgrounds. */  

21.   

22.  background-position:bottombottom left;   

23.  background-image:url('button_bg.png');   

24.   

25.  /* Multiple backgrounds version. The background images  

26.     are defined individually in color classes */  

27.   

28.  background-position:bottombottom left, top rightright, 0 0, 0 0;   

29.  background-clip:border-box;   

30.   

31.  /* Applying a default border raidus of 8px */  

32.   

33.  -moz-border-radius:8px;   

34.  -webkit-border-radius:8px;   

35.  border-radius:8px;   

36.   

37.  /* A 1px highlight inside of the button */  

38.   

39.  -moz-box-shadow:0 0 1px #fff inset;   

40.  -webkit-box-shadow:0 0 1px #fff inset;   

41.  box-shadow:0 0 1px #fff inset;   

42.   

43.  /* Animating the background positions with CSS3 */  

44.  /* Currently works only in Safari/Chrome */  

45.   

46.  -webkit-transition:background-position 1s;   

47.  -moz-transition:background-position 1s;   

48.  transition:background-position 1s;   

49. }   

50.   

51. .button:hover{   

52.   

53.  /* The first rule is a fallback, in case the browser  

54.     does not support multiple backgrounds  

55.  */  

56.   

57.  background-position:top left;   

58.  background-position:top left, bottombottom rightright, 0 0, 0 0;   

59. }   

60.   

61. .button:active{   

62.  /* Moving the button 1px to the bottom when clicked */  

63.  bottombottom:-1px;   

64. }   

65.   

66. /* The three buttons sizes */  

67.   

68. .button.big  { font-size:30px;}   

69. .button.medium { font-size:18px;}   

70. .button.small { font-size:13px;}   

71.   

72. /* A more rounded button */  

73.   

74. .button.rounded{   

75.  -moz-border-radius:4em;   

76.  -webkit-border-radius:4em;   

77.  border-radius:4em;   

78. }   

79.   

80. /* Defining four button colors */  

81.   

82. /* BlueButton */  

83.   

84. .blue.button{   

85.  color:#0f4b6d !important;   

86.   

87.  border:1px solid #84acc3 !important;   

88.   

89.  /* A fallback background color */  

90.  background-color: #48b5f2;   

91.   

92.  /* Specifying a version with gradients according to */  

93.   

94.  background-image: url('button_bg.png'), url('button_bg.png'),   

95.       -moz-radial-gradient( center bottombottom, circle,   

96.             rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),   

97.       -moz-linear-gradient(#4fbbf7, #3faeeb);   

98.   

99.  background-image: url('button_bg.png'), url('button_bg.png'),   

100.       -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,   

101.            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),   

102.       -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));   

103. }   

104.   

105. .blue.button:hover{   

106.  background-color:#63c7fe;   

107.   

108.  background-image: url('button_bg.png'), url('button_bg.png'),   

109.       -moz-radial-gradient( center bottombottom, circle,   

110.             rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),   

111.       -moz-linear-gradient(#63c7fe, #58bef7);   

112.   

113.  background-image: url('button_bg.png'), url('button_bg.png'),   

114.       -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,   

115.            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),   

116.       -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));   

117. }   

118.   

119. /* Green Button */  

120.   

121. .green.button{   

122.  color:#345903 !important;   

123.  border:1px solid #96a37b !important;    

124.  background-color: #79be1e;   

125.   

126.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);   

127.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));   

128. }   

129.   

130. .green.button:hover{   

131.  background-color:#89d228;   

132.   

133.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);   

134.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));   

135. }   

136.   

137. /* Orange Button */  

138.   

139. .orange.button{   

140.  color:#693e0a !important;   

141.  border:1px solid #bea280 !important;    

142.  background-color: #e38d27;   

143.   

144.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);   

145.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));   

146. }   

147.   

148. .orange.button:hover{   

149.  background-color:#ec9732;   

150.   

151.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);   

152.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));   

153. }   

154.   

155. .gray.button{   

156.  color:#525252 !important;   

157.  border:1px solid #a5a5a5 !important;    

158.  background-color: #a9adb1;   

159.   

160.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);   

161.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));   

162. }   

163.   

164. .gray.button:hover{   

165.  background-color:#b6bbc0;   

166.   

167.  background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottombottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);   

168.  background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));   

169. }   

到此，關于“CSS3怎么實現按鈕動畫”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！