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

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

　　实现的代码。

　　html代码：

1. <div class="wrapp">  
2.         <div class="text">  
3.             <h1>  
4.                 Windows 8</h1>  
5.         </div>  
6.         <div class="logo">  
7.             <span class="top-left"></span><span class="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: -150px 0 0 -300px;   
13.     -webkit-perspective: 30px;   
14.     -webkit-transform: translateX(0px);   
15.     -webkit-animation: wrapp 400ms 800ms ease-in forwards;   
16.   
17.     -moz-perspective: 30px;   
18.     -moz-transform: translateX(0px);   
19.     -moz-animation: wrapp 400ms 800ms ease-in forwards;   
20.   
21.     -ms-perspective: 30px;   
22.     -ms-transform: translateX(0px);   
23.     -ms-animation: wrapp 400ms 800ms ease-in forwards;   
24.   
25.     perspective: 30px;   
26.     transform: translateX(0px);   
27.     animation: wrapp 400ms 800ms ease-in forwards;   
28. }   
29. .text{   
30.     position: absolute;   
31.     top: 50%;   
32.     left: 50%;   
33.     width: 0px;   
34.     height: 60px;   
35.