实例好代码教程 纯CSS3打造非常炫的加载动画效果

网络
弃我而去而又重返的人，我会把他忽略。因为他再也给不了我一颗完整的心。将来的一面，我们必须容忍爱人的所有面。

　　纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。代码非常简单。没有用任何javascript代码。纯css3实现。先上效果图：

　　实现代码如下：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="content">
  2. <divstyle="width:970px;margin:auto">
  3. </div>
  4. <divclass="rotate">
  5. <spanclass="trianglebase"></span><spanclass="triangleno1"></span><spanclass="triangleno2">
  6. </span><spanclass="triangleno3"></span>
  7. </div>
  8. </div>

　　CSS代码：

CSS Code复制内容到剪贴板
  1. body{
  2. padding:0;
  3. margin:0;
  4. background-color:#2a4e66;
  5. overflow:hidden;
  6. }
  8. .content{
  9. width:100%;
  10. height:100%;
  11. top:0;
  12. rightright:0;
  13. bottombottom:0;
  14. left:0;
  15. position:absolute;
  16. }
  18. .rotate{
  19. position:absolute;
  20. top:50%;
  21. left:50%;
  22. margin:-93px00-93px;
  23. background:transparent;
  24. width:186px;
  25. height:186px;
  26. border-radius:50%;
  27. z-index:20;
  28. }
  30. .rotate:after{
  31. content:'';
  32. position:absolute;
  33. box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;
  34. width:186px;
  35. height:186px;
  36. border-radius:50%;
  37. z-index:10;
  38. }
  40. span.triangle.base{
  41. position:absolute;
  42. width:0;
  43. height:0;
  44. margin:46px0013px;
  45. border-left:80pxsolidtransparent;
  46. border-right:80pxsolidtransparent;
  47. border-top:140pxsolid#eeeeee;
  48. transform-origin:50%50%;
  49. z-index:20;
  50. }
  52. span.triangle.no1{
  53. position:absolute;
  54. margin:46px0013px;
  55. width:0;
  56. height:0;
  57. border-left:80pxsolidtransparent;
  58. border-right:80pxsolidtransparent;
  59. border-bottom:140pxsolid#eeeeee;
  60. transform-origin:0100%;
  61. z-index:20;
  62. }
  64. span.triangle.no2{
  65. position:absolute;
  66. margin:46px0013px;
  67. width:0;
  68. height:0;
  69. border-left:80pxsolidtransparent;
  70. border-right:80pxsolidtransparent;
  71. border-bottom:140pxsolid#eeeeee;
  72. transform-origin:100%100%;
  73. z-index:20;
  74. }
  76. span.triangle.no3{
  77. position:absolute;
  78. margin:46px0013px;
  79. width:0;
  80. height:0;
  81. border-left:80pxsolidtransparent;
  82. border-right:80pxsolidtransparent;
  83. border-bottom:140pxsolid#eeeeee;
  84. transform-origin:50%100%;
  85. z-index:20;
  86. }
  88. /*Animation*/
  90. .rotate{
  91. -webkit-animation:rotateTriangle3slinearinfinite;
  92. animation:rotateTriangle3slinearinfinite;
  93. }
  95. @-webkit-keyframesrotateTriangle{
  96. from{-webkit-transform:rotate(0deg);}
  97. to{-webkit-transform:rotate(60deg);}
  98. }
  99. @keyframesrotateTriangle{
  100. from{transform:rotate(0deg);}
  101. to{transform:rotate(60deg);}
  102. }
  104. .rotate:after{
  105. -webkit-animation:glowAnimation3seaseinfinite;
  106. animation:glowAnimation3seaseinfinite;
  107. }
  109. @-webkit-keyframesglowAnimation{
  110. 0%{box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;}
  111. 10%{box-shadow:0080px#ffffff,0020px#ffffff,002px#ffffff,inset004px#ffffff,inset008px#ffffff;}
  112. 100%{box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;}
  113. }
  114. @keyframesglowAnimation{
  115. 0%{box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;}
  116. 10%{box-shadow:0080px#ffffff,0020px#ffffff,002px#ffffff,inset004px#ffffff,inset008px#ffffff;}
  117. 100%{box-shadow:0030px#ffffff,0010px#ffffff,002px#ffffff,inset002px#ffffff,inset004px#ffffff;}
  118. }
  120. span.triangle.base{
  121. -webkit-animation:scaleTriangleBase3slinearinfinite;
  122. animation:scaleTriangleBase3slinearinfinite;
  123. }
  125. @-webkit-keyframesscaleTriangleBase{
  126. from{-webkit-transform:translate(0px,-11px)scale(0.5);}
  127. to{-webkit-transform:translate(0px,0px)scale(1);}
  128. }
  129. @keyframesscaleTriangleBase{
  130. from{transform:translate(0px,-11px)scale(0.5);}
  131. to{transform:translate(0px,0px)scale(1);}
  132. }
  134. span.triangle.no1{
  135. -webkit-animation:scaleTriangleOne3slinearinfinite;
  136. animation:scaleTriangleOne3slinearinfinite;
  137. }
  139. @-webkit-keyframesscaleTriangleOne{
  140. from{-webkit-transform:translate(0px,-46px)scale(0.5);}
  141. to{-webkit-transform:translate(-80px,0px)scale(0);}
  142. }
  143. @keyframesscaleTriangleOne{
  144. from{transform:translate(0px,-46px)scale(0.5);}
  145. to{transform:translate(-80px,0px)scale(0);}
  146. }
  148. span.triangle.no2{
  149. -webkit-animation:scaleTriangleTwo3slinearinfinite;
  150. animation:scaleTriangleTwo3slinearinfinite;
  151. }
  153. @-webkit-keyframesscaleTriangleTwo{
  154. from{-webkit-transform:translate(0px,-46px)scale(0.5);}
  155. to{-webkit-transform:translate(80px,0px)scale(0);}
  156. }
  157. @keyframesscaleTriangleTwo{
  158. from{transform:translate(0px,-46px)scale(0.5);}
  159. to{transform:translate(80px,0px)scale(0);}
  160. }
  162. span.triangle.no3{
  163. -webkit-animation:scaleTriangleThree3slinearinfinite;
  164. animation:scaleTriangleThree3slinearinfinite;
  165. }
  167. @-webkit-keyframesscaleTriangleThree{
  168. from{-webkit-transform:translate(0px,-116px)scale(0.5);}
  169. to{-webkit-transform:translate(0px,-280px)scale(0);}
  170. }
  171. @keyframesscaleTriangleThree{
  172. from{transform:translate(0px,-116px)scale(0.5);}
  173. to{transform:translate(0px,-280px)scale(0);}
  174. }
    175. 　　
　　以上就是实现一款非常炫的加载图的css代码，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。