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

    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; }   
}   
  
span.triangle.base {   
    -webkit-animation: scaleTriangleBase 3s linear infinite;   
    animation: scaleTriangleBase 3s linear infinite;   
}   
  
@-webkit-keyframes scaleTriangleBase {   
    from { -webkit-transform: translate(0px,-11px) scale(0.5); }   
    to { -webkit-transform: translate(0px,0px) scale(1); }   
    }   
@keyframes scaleTriangleBase {   
    from { transform: translate(0px,-11px) scale(0.5); }   
    to { transform: translate(0px,0px) scale(1); }   
}   
  
span.triangle.no1 {   
    -webkit-animation: scaleTriangleOne 3s linear infinite;   
    animation: scaleTriangleOne 3s linear infinite;   
}   
  
@-webkit-keyframes scaleTriangleOne {   
    from { -webkit-transform: translate(0px,-46px) scale(0.5); }   
    to { -webkit-transform: translate(-80px,0px) scale(0); }   
}   
@keyframes scaleTriangleOne {   
    from { transform: translate(0px,-46px) scale(0.5); }   
    to { transform: translate(-80px,0px) scale(0); }   
}   
  
span.triangle.no2 {   
    -webkit-animation: scaleTriangleTwo 3s linear infinite;   
    animation: scaleTriangleTwo 3s linear infinite;   
}   
  
@-webkit-keyframes scaleTriangleTwo {   
    from { -webkit-transform: translate(0px,-46px) scale(0.5); }