純CSS3怎么打造好看的加載動畫效果

本篇內容介紹了“純CSS3怎么打造好看的加載動畫效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　純css3打造的一款非常炫的加載圖。用在需要一定時間加載的地方非常合適。代碼非常簡單。沒有用任何javascript代碼。純css3實現。先上效果圖：

　　實現代碼如下：

　　html代碼：

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

1. <div class="content">  

2.        <div style="width: 970px; margin: auto">  

3.        </div>  

4.        <div class="rotate">  

5.            <span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2">  

6.            </span><span class="triangle no3"></span>  

7.        </div>  

8.    </div>  

　　CSS代碼：

CSS Code復制內容到剪貼板

1. body {   

2.     padding:0;   

3.     margin:0;      

4.     background-color: #2a4e66;   

5.   overflow: hidden;   

6. }   

7.   

8. .content {   

9.     width:100%;   

10.     height:100%;   

11.     top:0;   

12.     rightright:0;   

13.     bottombottom:0;   

14.     left:0;   

15.     position:absolute;   

16. }   

17.   

18. .rotate {   

19.     position: absolute;   

20.     top: 50%;   

21.     left: 50%;   

22.     margin: -93px 0 0 -93px;   

23.     background: transparent;   

24.     width: 186px;   

25.     height: 186px;   

26.     border-radius: 50%;   

27.     z-index: 20;   

28. }   

29.   

30. .rotate:after {   

31.     content: '';       

32.     position: absolute;   

33.     box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;   

34.     width: 186px;   

35.     height: 186px;   

36.     border-radius: 50%;   

37.     z-index: 10;   

38. }   

39.   

40. span.triangle.base {   

41.     position: absolute;   

42.     width: 0;    

43.     height: 0;   

44.     margin: 46px 0 0 13px;   

45.     border-left: 80px solid transparent;   

46.     border-right: 80px solid transparent;                  

47.     border-top: 140px solid #eeeeee;   

48.     transform-origin: 50% 50%;   

49.     z-index: 20;   

50. }   

51.   

52. span.triangle.no1 {   

53.     position: absolute;   

54.     margin: 46px 0 0 13px;   

55.     width: 0;    

56.     height: 0;    

57.     border-left: 80px solid transparent;   

58.     border-right: 80px solid transparent;                  

59.     border-bottom: 140px solid #eeeeee;   

60.     transform-origin: 0 100%;   

61.     z-index: 20;   

62. }   

63.   

64. span.triangle.no2 {   

65.     position: absolute;   

66.     margin: 46px 0 0 13px;   

67.     width: 0;    

68.     height: 0;    

69.     border-left: 80px solid transparent;   

70.     border-right: 80px solid transparent;                  

71.     border-bottom: 140px solid #eeeeee;   

72.     transform-origin: 100% 100%;   

73.     z-index: 20;   

74. }   

75.   

76. span.triangle.no3 {   

77.     position: absolute;   

78.     margin: 46px 0 0 13px;   

79.     width: 0;    

80.     height: 0;    

81.     border-left: 80px solid transparent;   

82.     border-right: 80px solid transparent;                  

83.     border-bottom: 140px solid #eeeeee;   

84.     transform-origin: 50% 100%;   

85.     z-index: 20;   

86. }   

87.   

88. /* Animation */  

89.   

90. .rotate {   

91.     -webkit-animation: rotateTriangle 3s linear infinite;   

92.     animation: rotateTriangle 3s linear infinite;   

93. }   

94.   

95. @-webkit-keyframes rotateTriangle {   

96.     from { -webkit-transform: rotate(0deg); }   

97.     to { -webkit-transform: rotate(60deg); }   

98. }   

99. @keyframes rotateTriangle {   

100.     from { transform: rotate(0deg); }   

101.     to { transform: rotate(60deg); }   

102. }   

103.   

104. .rotate:after {   

105.     -webkit-animation: glowAnimation 3s ease infinite;   

106.     animation: glowAnimation 3s ease infinite;   

107. }   

108.   

109. @-webkit-keyframes glowAnimation {         

110.     0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

111.     10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }   

112.     100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

113. }   

114. @keyframes glowAnimation {   

115.     0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

116.     10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }   

117.     100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

118. }   

119.   

120. span.triangle.base {   

121.     -webkit-animation: scaleTriangleBase 3s linear infinite;   

122.     animation: scaleTriangleBase 3s linear infinite;   

123. }   

124.   

125. @-webkit-keyframes scaleTriangleBase {   

126.     from { -webkit-transform: translate(0px,-11px) scale(0.5); }   

127.     to { -webkit-transform: translate(0px,0px) scale(1); }   

128.     }   

129. @keyframes scaleTriangleBase {   

130.     from { transform: translate(0px,-11px) scale(0.5); }   

131.     to { transform: translate(0px,0px) scale(1); }   

132. }   

133.   

134. span.triangle.no1 {   

135.     -webkit-animation: scaleTriangleOne 3s linear infinite;   

136.     animation: scaleTriangleOne 3s linear infinite;   

137. }   

138.   

139. @-webkit-keyframes scaleTriangleOne {   

140.     from { -webkit-transform: translate(0px,-46px) scale(0.5); }   

141.     to { -webkit-transform: translate(-80px,0px) scale(0); }   

142. }   

143. @keyframes scaleTriangleOne {   

144.     from { transform: translate(0px,-46px) scale(0.5); }   

145.     to { transform: translate(-80px,0px) scale(0); }   

146. }   

147.   

148. span.triangle.no2 {   

149.     -webkit-animation: scaleTriangleTwo 3s linear infinite;   

150.     animation: scaleTriangleTwo 3s linear infinite;   

151. }   

152.   

153. @-webkit-keyframes scaleTriangleTwo {   

154.     from { -webkit-transform: translate(0px,-46px) scale(0.5); }   

155.     to { -webkit-transform: translate(80px,0px) scale(0); }   

156. }   

157. @keyframes scaleTriangleTwo {   

158.     from { transform: translate(0px,-46px) scale(0.5); }   

159.     to { transform: translate(80px,0px) scale(0); }   

160. }   

161.   

162. span.triangle.no3 {   

163.     -webkit-animation: scaleTriangleThree 3s linear infinite;   

164.     animation: scaleTriangleThree 3s linear infinite;   

165. }   

166.   

167. @-webkit-keyframes scaleTriangleThree {   

168.     from { -webkit-transform: translate(0px,-116px) scale(0.5); }   

169.     to { -webkit-transform: translate(0px,-280px) scale(0); }   

170. }   

171. @keyframes scaleTriangleThree {   

172.     from { transform: translate(0px,-116px) scale(0.5); }   

173.     to { transform: translate(0px,-280px) scale(0); }   

174. }  

175. 
     

“純CSS3怎么打造好看的加載動畫效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！