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

　　纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。代码非常简单。没有用任何javascript代码。纯css3实现。先上效果图：

　　实现代码如下：

　　html代码：

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代码：

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