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

    width: 0;    
    height: 0;    
    border-left: 80px solid transparent;   
    border-right: 80px solid transparent;                  
    border-bottom: 140px solid #eeeeee;   
    transform-origin: 50% 100%;   
    z-index: 20;   
}   
  
/* Animation */  
  
.rotate {   
    -webkit-animation: rotateTriangle 3s linear infinite;   
    animation: rotateTriangle 3s linear infinite;   
}   
  
@-webkit-keyframes rotateTriangle {   
    from { -webkit-transform: rotate(0deg); }   
    to { -webkit-transform: rotate(60deg); }   
}   
@keyframes rotateTriangle {   
    from { transform: rotate(0deg); }   
    to { transform: rotate(60deg); }   
}   
  
.rotate:after {   
    -webkit-animation: glowAnimation 3s ease infinite;   
    animation: glowAnimation 3s ease infinite;   
}   
  
@-webkit-keyframes glowAnimation {         
    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; }   
    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; }   
    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; }   
}   
@keyframes glowAnimation {   
    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; }