纯CSS3打造非常炫的加载动画

代码非常简单。没有用任何javascript代码。纯css3实现。
/* 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; }
    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); }
    to { -webkit-transform: translate(80px,0px) scale(0); }
}
@keyframes scaleTriangleTwo {
    from { transform: translate(0px,-46px) scale(0.5); }
    to { transform: translate(80px,0px) scale(0); }
}

span.triangle.no3 {
    -webkit-animation: scaleTriangleThree 3s linear infinite;
    animation: scaleTriangleThree 3s linear infinite;
}

@-webkit-keyframes scaleTriangleThree {
    from { -webkit-transform: translate(0px,-116px) scale(0.5); }
    to { -webkit-transform: translate(0px,-280px) scale(0); }
}
@keyframes scaleTriangleThree {
    from { transform: translate(0px,-116px) scale(0.5); }
    to { transform: translate(0px,-280px) scale(0); }
}