一款利用纯css3实现的win8加载动画的实例分析

　　今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：

　　实现的代码。

　　html代码：

1. <divclass="wrapp">
2. <divclass="text">
3. <h1>
4. Windows8</h1>
5. </div>
6. <divclass="logo">
7. <spanclass="top-left"></span><spanclass="bottom-right"></span>
8. </div>
9. </div>

　　css3代码：

1. body{
2. margin:0;
3. padding:0;
4. background-color:#90da15;
5. }
6. .wrapp{
7. position:absolute;
8. top:50%;
9. left:50%;
10. width:600px;
11. height:300px;
12. margin:-150px00-300px;
13. -webkit-perspective:30px;
14. -webkit-transform:translateX(0px);
15. -webkit-animation:wrapp400ms800msease-inforwards;
17. -moz-perspective:30px;
18. -moz-transform:translateX(0px);
19. -moz-animation:wrapp400ms800msease-inforwards;
21. -ms-perspective:30px;
22. -ms-transform:translateX(0px);
23. -ms-animation:wrapp400ms800msease-inforwards;
25. perspective:30px;
26. transform:translateX(0px);
27. animation:wrapp400ms800msease-inforwards;
28. }
29. .text{
30. position:absolute;
31. top:50%;
32. left:50%;
33. width:0px;
34. height:60px;
35. margin:-30px00-160px;
36. overflow:hidden;
37. -webkit-transform:translateX(0px);
38. -webkit-animation:text400ms800mslinearforwards;
40. -moz-transform:translateX(0px);
41. -moz-animation:text400ms800mslinearforwards;
43. -ms-transform:translateX(0px);
44. -ms-animation:text400ms800mslinearforwards;
46. transform:translateX(0px);
47. animation:text400ms800mslinearforwards;
48. }
49. h1{
50. float:rightright;
51. font-family:"SegoeUI",Frutiger,"FrutigerLinotype","DejavuSans","HelveticaNeue",Arial,sans-serif;
52. font-weight:normal;
53. color:#fff;
54. padding:0;
55. margin:0;
56. width:320px;
57. height:60px;
58. font-size:60px;
59. line-height:60px;
60. }
61. .logo{
62. position:absolute;
63. top:50%;
64. left:50%;
65. width:90px;
66. height:90px;
67. margin:-45px00-45px;
68. background-color:#fff;
69. -webkit-transform:translateX(0px)rotateY(10deg);
70. -webkit-animation:logo500ms300msease-outforwards;
72. -moz-transform:translateX(0px)rotateY(10deg);
73. -moz-animation:logo500ms300msease-outforwards;
75. -ms-transform:translateX(0px)rotateY(10deg);
76. -ms-animation:logo500ms300msease-outforwards;
78. transform:translateX(0px)rotateY(10deg);
79. animation:logo500ms300msease-outforwards;
80. }
81. .logo.top-left{
82. position:absolute;
83. top:0;
84. left:0;
85. width:44px;
86. height:44px;
87. border-right:solid2px#90da15;
88. border-bottom:solid2px#90da15;
89. }
90. .logo.bottombottom-rightright{
91. position:absolute;
92. bottombottom:0;
93. rightright:0;
94. width:44px;
95. height:44px;
96. border-left:solid2px#90da15;
97. border-top:solid2px#90da15;
98. }
100. @-webkit-keyframeslogo{
101. from{
102. -webkit-transform:translateX(0px)rotateY(10deg);
103. }
104. to{
105. -webkit-transform:translateX(0px)rotateY(-10deg);
106. }
107. }
108. @-webkit-keyframestext{
109. from{
110. width:0px;
111. -webkit-transform:translateX(0px);
112. }
113. 60%{
114. width:0px;
115. }
116. to{
117. width:320px;
118. -webkit-transform:translateX(240px);
119. }
120. }
121. @-webkit-keyframeswrapp{
122. from{
123. -webkit-transform:translateX(0px);
124. }
125. to{
126. -webkit-transform:translateX(-200px);
127. }
128. }
129. @-moz-keyframeslogo{
130. from{
131. -moz-transform:translateX(0px)rotateY(10deg);
132. }
133. to{
134. -moz-transform:translateX(0px)rotateY(-10deg);
135. }
136. }
137. @-moz-keyframestext{
138. from{
139. width:0px;
140. -moz-transform:translateX(0px);
141. }
142. 60%{
143. width:0px;
144. }
145. to{
146. width:320px;
147. -moz-transform:translateX(240px);
148. }
149. }
150. @-moz-keyframeswrapp{
151. from{
152. -moz-transform:translateX(0px);
153. }
154. to{
155. -moz-transform:translateX(-200px);
156. }
157. }
159. @-ms-keyframeslogo{
160. from{
161. -ms-transform:translateX(0px)rotateY(10deg);
162. }
163. to{
164. -ms-transform:translateX(0px)rotateY(-10deg);
165. }
166. }
167. @-ms-keyframestext{
168. from{
169. width:0px;
170. -ms-transform:translateX(0px);
171. }
172. 60%{
173. width:0px;
174. }
175. to{
176. width:320px;
177. -ms-transform:translateX(240px);
178. }
179. }
180. @-ms-keyframeswrapp{
181. from{
182. -ms-transform:translateX(0px);
183. }
184. to{
185. -ms-transform:translateX(-200px);
186. }
187. }
188. @keyframeslogo{
189. from{
190. transform:translateX(0px)rotateY(10deg);
191. }
192. to{
193. transform:translateX(0px)rotateY(-10deg);
194. }
195. }
196. @keyframestext{
197. from{
198. width:0px;
199. transform:translateX(0px);
200. }
201. 60%{
202. width:0px;
203. }
204. to{
205. width:320px;
206. transform:translateX(240px);
207. }
208. }
209. @keyframeswrapp{
210. from{
211. transform:translateX(0px);
212. }
213. to{
214. transform:translateX(-200px);
215. }
216. }