纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。代码非常简单。没有用任何javascript代码。纯css3实现。先上效果图：
实现代码如下：
html代码：
XML/HTML Code复制内容到剪贴板 <divclass="content"> <divstyle="width:970px;margin:auto"> </div> <divclass="rotate"> <spanclass="trianglebase"></span><spanclass="triangleno1"></span><spanclass="triangleno2"> </span><spanclass="triangleno3"></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:-93px00-93px; background:transparent; width:186px; height:186px; border-radius:50%; z-index:20; } .rotate:after{ content:''; position:absolute; box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff; width:186px; height:186px; border-radius:50%; z-index:10; } span.triangle.base{ position:absolute; width:0; height:0; margin:46px0013px; border-left:80pxsolidtransparent; border-right:80pxsolidtransparent; border-top:140pxsolid#eeeeee; transform-origin:50%50%; z-index:20; } span.triangle.no1{ position:absolute; margin:46px0013px; width:0; height:0; border-left:80pxsolidtransparent; border-right:80pxsolidtransparent; border-bottom:140pxsolid#eeeeee; transform-origin:0100%; z-index:20; } span.triangle.no2{ position:absolute; margin:46px0013px; width:0; height:0; border-left:80pxsolidtransparent; border-right:80pxsolidtransparent; border-bottom:140pxsolid#eeeeee; transform-origin:100%100%; z-index:20; } span.triangle.no3{ position:absolute; margin:46px0013px; width:0; height:0; border-left:80pxsolidtransparent; border-right:80pxsolidtransparent; border-bottom:140pxsolid#eeeeee; transform-origin:50%100%; z-index:20; } /*Animation*/ .rotate{ -webkit-animation:rotateTriangle3slinearinfinite; animation:rotateTriangle3slinearinfinite; } @-webkit-keyframesrotateTriangle{ from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(60deg);} } @keyframesrotateTriangle{ from{transform:rotate(0deg);} to{transform:rotate(60deg);} } .rotate:after{ -webkit-animation:glowAnimation3seaseinfinite; animation:glowAnimation3seaseinfinite; } @-webkit-keyframesglowAnimation{ 0%{box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;} 10%{box-shadow:0080px#ffffff,0020px#ffffff,002px#ffffff,inset004px#ffffff,inset008px#ffffff;} 100%{box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;} } @keyframesglowAnimation{ 0%{box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;} 10%{box-shadow:0080px#ffffff,0020px#ffffff,002px#ffffff,inset004px#ffffff,inset008px#ffffff;} 100%{box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;} } span.triangle.base{ -webkit-animation:scaleTriangleBase3slinearinfinite; animation:scaleTriangleBase3slinearinfinite; } @-webkit-keyframesscaleTriangleBase{ from{-webkit-transform:translate(0px,-11px)scale(0.5);} to{-webkit-transform:translate(0px,0px)scale(1);} } @keyframesscaleTriangleBase{ from{transform:translate(0px,-11px)scale(0.5);} to{transform:translate(0px,0px)scale(1);} } span.triangle.no1{ -webkit-animation:scaleTriangleOne3slinearinfinite; animation:scaleTriangleOne3slinearinfinite; } @-webkit-keyframesscaleTriangleOne{ from{-webkit-transform:translate(0px,-46px)scale(0.5);} to{-webkit-transform:translate(-80px,0px)scale(0);} } @keyframesscaleTriangleOne{ from{transform:translate(0px,-46px)scale(0.5);} to{transform:translate(-80px,0px)scale(0);} } span.triangle.no2{ -webkit-animation:scaleTriangleTwo3slinearinfinite; animation:scaleTriangleTwo3slinearinfinite; } @-webkit-keyframesscaleTriangleTwo{ from{-webkit-transform:translate(0px,-46px)scale(0.5);} to{-webkit-transform:translate(80px,0px)scale(0);} } @keyframesscaleTriangleTwo{ from{transform:translate(0px,-46px)scale(0.5);} to{transform:translate(80px,0px)scale(0);} } span.triangle.no3{ -webkit-animation:scaleTriangleThree3slinearinfinite; animation:scaleTriangleThree3slinearinfinite; } @-webkit-keyframesscaleTriangleThree{ from{-webkit-transform:translate(0px,-116px)scale(0.5);} to{-webkit-transform:translate(0px,-280px)scale(0);} } @keyframesscaleTriangleThree{ from{transform:translate(0px,-116px)scale(0.5);} to{transform:translate(0px,-280px)scale(0);} } 以上就是实现一款非常炫的加载图的css代码，谢谢阅读，希望能帮到大家，请继续关注查字典教程网，我们会努力分享更多优秀的文章。
【实例教程 纯CSS3打造非常炫的加载动画效果】相关文章：