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

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

　　实现代码如下：

　　html代码：

XML/HTML Code复制内容到剪贴板

<div class="content">  
       <div style="width: 970px; margin: auto">  
       </div>  
       <div class="rotate">  
           <span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2">  
           </span><span class="triangle no3"></span>  
       </div>  
   </div>  

　　CSS代码：

CSS Code复制内容到剪贴板

body {   
    padding:0;   
    margin:0;      
    background-color: #2a4e66;   
  overflow: hidden;   
}   
  
.content {   
    width:100%;   
    height:100%;   
    top:0;   
    rightright:0;   
    bottombottom:0;   
    left:0;   
    position:absolute;   
}   
  
.rotate {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    margin: -93px 0 0 -93px;   
    background: transparent;   
    width: 186px;   
    height: 186px;   
    border-radius: 50%;   
    z-index: 20;   
}   
  
.rotate:after {   
    content: ”;       
    position: absolute;   
    box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;