今天小编跟大家讲解下有关实例教程 纯CSS3打造非常炫的加载动画效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关实例教程 纯CSS3打造非常炫的加载动画效果 的相关资料，希望小伙伴们看了有所帮助。
纯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代码 谢谢阅读 希望能帮到大家 请继续关注AIDI 我们会努力分享更多优秀的文章。来源：爱蒂网
