实例教程 纯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;        width: 186px;        height: 186px;        border-radius: 50%;        z-index: 10;    }       span.triangle.base {        position: absolute;        width: 0;         height: 0;        margin: 46px 0 0 13px;        border-left: 80px solid transparent;        border-right: 80px solid transparent;                       border-top: 140px solid #eeeeee;        transform-origin: 50% 50%;        z-index: 20;    }       span.triangle.no1 {        position: absolute;        margin: 46px 0 0 13px;        width: 0;         height: 0;         border-left: 80px solid transparent;        border-right: 80px solid transparent;                       border-bottom: 140px solid #eeeeee;        transform-origin: 0 100%;        z-index: 20;    }       span.triangle.no2 {        position: absolute;        margin: 46px 0 0 13px;        width: 0;         height: 0;         border-left: 80px solid transparent;        border-right: 80px solid transparent;                       border-bottom: 140px solid #eeeeee;        transform-origin: 100% 100%;        z-index: 20;    }       span.triangle.no3 {        position: absolute;        margin: 46px 0 0 13px;        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; }        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); }    }   　　以上就是实现一款非常炫的加载图的css代码，谢谢阅读，希望能帮到大家，请继续关注软件开发网，我们会努力分享更多优秀的文章。

动画 CSS CSS3 教程