纯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;}.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代码，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。
