实例教程 纯CSS3打造非常炫的加载动画效果

前端  /  管理员 发布于 7年前   139

　　纯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. }  
　　

　　以上就是实现一款非常炫的加载图的css代码，谢谢阅读，希望能帮到大家，请继续关注AIDI，我们会努力分享更多优秀的文章。