文档章节

---CSS3绘制8种超炫的加载动画

海博1600
 海博1600
发布于 2018/07/07 21:51
字数 7105
阅读 28
收藏 0

   CSS3绘制8种超炫的加载动画

    逛前端开发网站的时候,偶尔发现一组非常炫酷的CSS3加载动画,遂迫不及待的做个Demo保存下来。

        这些加载动画用到了CSS3的旋转transform属性,颜色透明度设置和伪元素操作等CSS技术。奇妙的组合,产生了意想不到的效果。

        1.上下起伏波动的加载动画:

        

 
  1. #loader1,

  2. #loader1:before,

  3. #loader1:after {

  4. background: #f2fa08;

  5. -webkit-animation: load1 1s infinite ease-in-out;

  6. animation: load1 1s infinite ease-in-out;

  7. width: 1em;

  8. height: 4em;

  9. }

  10. #loader1:before,

  11. #loader1:after {

  12. position: absolute;

  13. top: 0;

  14. content: '';

  15. }

  16. #loader1:before {

  17. left: -1.5em;

  18. }

  19. #loader1 {

  20. text-indent: -9999em;

  21. margin: 50px 50px;

  22. position: relative;

  23. float: left;

  24. font-size: 11px;

  25. -webkit-animation-delay: 0.16s;

  26. animation-delay: 0.16s;

  27. }

  28. #loader1:after {

  29. left: 1.5em;

  30. -webkit-animation-delay: 0.32s;

  31. animation-delay: 0.32s;

  32. }

  33. @-webkit-keyframes load1 {

  34. 0%,

  35. 80%,

  36. 100% {

  37. box-shadow: 0 0 #f2fa08;

  38. height: 4em;

  39. }

  40. 40% {

  41. box-shadow: 0 -2em #f2fa08;

  42. height: 5em;

  43. }

  44. }

  45. @keyframes load1 {

  46. 0%,

  47. 80%,

  48. 100% {

  49. box-shadow: 0 0 #f2ff08;

  50. height: 4em;

  51. }

  52. 40% {

  53. box-shadow: 0 -2em #f2ff08;

  54. height: 5em;

  55. }

  56. }

    2.类似弹簧效果的旋转加载动画:

 

     此处用到CSS3的transform属性。

     CSS3的变形(transform)属性让元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素。 
      transform属性可用于内联元素和块元素。其默认值为none,表示不元素不进行变形。transform另一个属性值是一系列的<transform-function>。<transform-function>表示一个或多个变形函数,以空格分开;我们可以同时对一个元素进行变形的多种属性操作,如rotate、scale、translate等。以往我们叠加效果都是用逗号(“,”)隔开,但在transform中使用多个transform-function时却需要有空格隔开。
  ● 2D transform常用的transform-function的功能:
      transform属性3D变形(3D transform)模块的一部分,也就是说所有的2D变形函数也包含于3D变形规范中。如此一来,CSS3变形中的函数根据不同的规范略有不同,下面列出的是变形中的2D和3D常用变形函数的功能,简单说明如下: 

      translate():用来移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数:translateX()和translateY()。

     scale():用来缩小或放大元素,可以使用元素尺寸发生变化。在此基础上有两个扩展函数:scaleX()和scaleY()。            rotate():用来旋转元素。

     skew():用来让元素倾斜。在此基础上有两个扩展函数:skewX()和skewY()。

     matrix():定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置。
 ● 3D transform常用的transform-function的功能:
      translate3d():移元素元素,用来指定一个3D变形移动位移量。
      translate():指定3D位移在Z轴的位移量。
      scale3d():用来缩放一个元素。
      scaleZ():指定Z轴的缩放向量。
      rotate3d():指定元素具有一个三维旋转的角度。
      rotateX()、rotateY()和rotateZ():让元素具有一个旋转角度。
      perspective():指定一个透视投影矩阵。
      matrix3d():定义矩阵变形。

  ● transform-origin属性用来设置变换的原点。示例中代表旋转中心。

       

 
  1. #loader2,

  2. #loader2:before,

  3. #loader2:after {

  4. border-radius: 50%;

  5. }

  6. #loader2:before,

  7. #loader2:after {

  8. position: absolute;

  9. content: '';

  10. }

  11. #loader2:before {

  12. width: 5.2em;

  13. height: 10.2em;

  14. background: #ffffff;

  15. border-radius: 10.2em 0 0 10.2em;

  16. top: -0.1em;

  17. left: -0.1em;

  18. -webkit-transform-origin: 5.2em 5.1em;

  19. transform-origin: 5.2em 5.1em;

  20. -webkit-animation: load2 2s infinite ease 1.5s;

  21. animation: load2 2s infinite ease 1.5s;

  22. }

  23. #loader2 {

  24. font-size: 11px;

  25. text-indent: -99999em;

  26. margin: 20px 20px;

  27. position: relative;

  28. float: left;

  29. width: 10em;

  30. height: 10em;

  31. box-shadow: inset 0 0 0 1em #ff0f88;

  32. }

  33. #loader2:after {

  34. width: 5.2em;

  35. height: 10.2em;

  36. background: #ffffff;

  37. border-radius: 0 10.2em 10.2em 0;

  38. top: -0.1em;

  39. left: 5.1em;

  40. -webkit-transform-origin: 0px 5.1em;

  41. transform-origin: 0px 5.1em;

  42. -webkit-animation: load2 2s infinite ease;

  43. animation: load2 2s infinite ease;

  44. }

  45. @-webkit-keyframes load2 {

  46. 0% {

  47. -webkit-transform: rotate(0deg);

  48. transform: rotate(0deg);

  49. }

  50. 100% {

  51. -webkit-transform: rotate(360deg);

  52. transform: rotate(360deg);

  53. }

  54. }

  55. @keyframes load2 {

  56. 0% {

  57. -webkit-transform: rotate(0deg);

  58. transform: rotate(0deg);

  59. }

  60. 100% {

  61. -webkit-transform: rotate(360deg);

  62. transform: rotate(360deg);

  63. }

  64. }

      3.大小不一的粒子旋转加载动画:

       

 
  1. #load3,

  2. #loader3 {

  3. font-size: 20px;

  4. margin: 80px 50px;

  5. float: left;

  6. width: 1em;

  7. height: 1em;

  8. border-radius: 50%;

  9. position: relative;

  10. text-indent: -9999em;

  11. -webkit-animation: load3 1.3s infinite linear;

  12. animation: load3 1.3s infinite linear;

  13. }

  14. @-webkit-keyframes load3 {

  15. 0%,

  16. 100% {

  17. box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,

  18. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  19. 0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  20. -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;

  21. }

  22. 12.5% {

  23. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,

  24. 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,

  25. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  26. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  27. }

  28. 25% {

  29. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,

  30. 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,

  31. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  32. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  33. }

  34. 37.5% {

  35. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  36. 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,

  37. 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,

  38. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  39. }

  40. 50% {

  41. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  42. 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,

  43. 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,

  44. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  45. }

  46. 62.5% {

  47. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  48. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  49. 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,

  50. -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;

  51. }

  52. 75% {

  53. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  54. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  55. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  56. -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;

  57. }

  58. 87.5% {

  59. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,

  60. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  61. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  62. -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;

  63. }

  64. }

  65. @keyframes load3 {

  66. 0%,

  67. 100% {

  68. box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,

  69. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  70. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  71. -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;

  72. }

  73. 12.5% {

  74. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,

  75. 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,

  76. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  77. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  78. }

  79. 25% {

  80. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,

  81. 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,

  82. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  83. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  84. }

  85. 37.5% {

  86. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  87. 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,

  88. 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,

  89. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  90. }

  91. 50% {

  92. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  93. 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,

  94. 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,

  95. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  96. }

  97. 62.5% {

  98. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  99. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  100. 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,

  101. -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;

  102. }

  103. 75% {

  104. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  105. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  106. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  107. -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;

  108. }

  109. 87.5% {

  110. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,

  111. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  112. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  113. -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;

  114. }

  115. }

     4.蛇形旋转加载动画:

      

 
  1. #loader4 {

  2. font-size: 10px;

  3. margin: 20px 20px;

  4. float: left;

  5. text-indent: -9999em;

  6. width: 11em;

  7. height: 11em;

  8. border-radius: 50%;

  9. background: #ffffff;

  10. background: -moz-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  11. background: -webkit-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  12. background: -o-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  13. background: -ms-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  14. background: linear-gradient(to right, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  15. position: relative;

  16. -webkit-animation: load4 1.4s infinite linear;

  17. animation: load4 1.4s infinite linear;

  18. }

  19. #loader4:before {

  20. width: 50%;

  21. height: 50%;

  22. background: #ff00ff;

  23. border-radius: 100% 0 0 0;

  24. position: absolute;

  25. top: 0;

  26. left: 0;

  27. content: '';

  28. }

  29. #loader4:after {

  30. background: #ffffff;

  31. width: 75%;

  32. height: 75%;

  33. border-radius: 50%;

  34. content: '';

  35. margin: auto;

  36. position: absolute;

  37. top: 0;

  38. left: 0;

  39. bottom: 0;

  40. right: 0;

  41. }

  42. @-webkit-keyframes load4 {

  43. 0% {

  44. -webkit-transform: rotate(0deg);

  45. transform: rotate(0deg);

  46. }

  47. 100% {

  48. -webkit-transform: rotate(360deg);

  49. transform: rotate(360deg);

  50. }

  51. }

  52. @keyframes load4 {

  53. 0% {

  54. -webkit-transform: rotate(0deg);

  55. transform: rotate(0deg);

  56. }

  57. 100% {

  58. -webkit-transform: rotate(360deg);

  59. transform: rotate(360deg);

  60. }

  61. }

     5.大小相同,颜色深浅不一的粒子旋转动画:

 

   它是运用CSS3的border-radius圆角属性、box-shadow阴影属性等属性制作出来的。

 

   animation属性设置的参数:

       ● 设置对象所应用的动画名称:load5。

       ● 设置对象动画的持续时间:1.1s。

       ● 设置对象动画的过渡类型:

             ease:动画以低速开始,然后加快,在结束前变慢。

             linear:匀速。

             ease-in:动画以低速开始。

             ease-out:动画以低速结束。

             ease-in-out:动画以低速开始和结束,相对于ease缓慢,速度更均匀。

             step-start:按keyframes设置逐帧显示,第一帧为keyframes设置的第一帧。

             step-end:按keyframes设置逐帧显示,第一帧为样式的初始值。

             steps(<number>[, [ start | end ] ]?):把keyframes里设置的一帧等分为几帧,start为第一次显示第一帧,end第一次显示样式的初始值,例如:steps(4,start)。

             cubic-bezier(<number>, <number>, <number>, <number>):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。贝兹曲线限制了首尾两控制点的位置,通过调整中间两控制点的位置可以灵活得到常用的动画效果。

        ● 设置对象动画的循环次数:infinite(无限循环)。

       将动画运行整个过程的分为0%,12.5%,25%,37.5%,50%,62.5%,75%,87.5%,100%这8个阶段,在不同的阶段运用颜色的透明度制作出不同的阴影效果。

     

 
  1. #load5,

  2. #loader5 {

  3. margin: 80px 50px;

  4. float: left;

  5. font-size: 25px;

  6. width: 1em;

  7. height: 1em;

  8. border-radius: 50%;

  9. position: relative;

  10. text-indent: -9999em;

  11. -webkit-animation: load5 1.1s infinite ease;

  12. animation: load5 1.1s infinite ease;

  13. }

  14. @-webkit-keyframes load5 {

  15. 0%,

  16. 100% {

  17. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  18. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  19. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  20. -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);

  21. }

  22. 12.5% {

  23. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),

  24. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  25. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  26. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);

  27. }

  28. 25% {

  29. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),

  30. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  31. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  32. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  33. }

  34. 37.5% {

  35. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),

  36. 2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  37. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  38. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  39. }

  40. 50% {

  41. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  42. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),

  43. 0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),

  44. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  45. }

  46. 62.5% {

  47. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  48. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),

  49. 0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),

  50. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  51. }

  52. 75% {

  53. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  54. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  55. 0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),

  56. -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  57. }

  58. 87.5% {

  59. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  60. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  61. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),

  62. -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);

  63. }

  64. }

  65. @keyframes load5 {

  66. 0%,

  67. 100% {

  68. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  69. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  70. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  71. -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);

  72. }

  73. 12.5% {

  74. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),

  75. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  76. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  77. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);

  78. }

  79. 25% {

  80. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),

  81. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  82. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  83. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  84. }

  85. 37.5% {

  86. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),

  87. 2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  88. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  89. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  90. }

  91. 50% {

  92. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  93. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),

  94. 0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),

  95. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  96. }

  97. 62.5% {

  98. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  99. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),

  100. 0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),

  101. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  102. }

  103. 75% {

  104. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  105. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  106. 0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),

  107. -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  108. }

  109. 87.5% {

  110. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  111. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  112. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),

  113. -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);

  114. }

  115. }

     6.粒子旋转伸缩加载动画:

 

      运用CSS3的旋转Transform属性和动画的执行百分比制作而成。

      

 
  1. #loader6 {

  2. margin: 60px 50px;

  3. float: left;

  4. font-size: 90px;

  5. text-indent: -9999em;

  6. overflow: hidden;

  7. width: 1em;

  8. height: 1em;

  9. border-radius: 50%;

  10. position: relative;

  11. -webkit-animation: load6 1.7s infinite ease;

  12. animation: load6 1.7s infinite ease;

  13. }

  14. @-webkit-keyframes load6 {

  15. 0% {

  16. -webkit-transform: rotate(0deg);

  17. transform: rotate(0deg);

  18. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  19. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  20. -0.11em -0.83em 0 -0.477em #ff0000;

  21. }

  22. 5%,

  23. 95% {

  24. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  25. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  26. -0.11em -0.83em 0 -0.477em #ff0000;

  27. }

  28. 30% {

  29. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,

  30. -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,

  31. -0.81em 0.21em 0 -0.477em #ff0000;

  32. }

  33. 55% {

  34. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,

  35. -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,

  36. -0.57em -0.61em 0 -0.477em #ff0000;

  37. }

  38. 100% {

  39. -webkit-transform: rotate(360deg);

  40. transform: rotate(360deg);

  41. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  42. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  43. -0.11em -0.83em 0 -0.477em #ff0000;

  44. }

  45. }

  46. @keyframes load6 {

  47. 0% {

  48. -webkit-transform: rotate(0deg);

  49. transform: rotate(0deg);

  50. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  51. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  52. -0.11em -0.83em 0 -0.477em #ff0000;

  53. }

  54. 5%,

  55. 95% {

  56. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  57. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  58. -0.11em -0.83em 0 -0.477em #ff0000;

  59. }

  60. 30% {

  61. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,

  62. -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,

  63. -0.81em 0.21em 0 -0.477em #ff0000;

  64. }

  65. 55% {

  66. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,

  67. -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,

  68. -0.57em -0.61em 0 -0.477em #ff0000;

  69. }

  70. 100% {

  71. -webkit-transform: rotate(360deg);

  72. transform: rotate(360deg);

  73. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  74. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  75. -0.11em -0.83em 0 -0.477em #ff0000;

  76. }

  77. }

      7.横向粒子变动加载动画:

 

      此处用到了CSS3动画animation属性的animation-fill-mode属性和animation-delay属性。
    ● animation-fill-mode属性规定动画在播放之前或之后,其动画效果是否可见。
        none:不改变默认行为。

        forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

        backwards:在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧

中定义)。

       both: 向前和向后填充模式都被应用。

     ●  animation-delay属性定义动画何时开始。该属性允许负值,示例中延迟0.16s执行动画。

         

 
  1. #loader7:before,

  2. #loader7:after,

  3. #loader7 {

  4. border-radius: 50%;

  5. width: 2.5em;

  6. height: 2.5em;

  7. -webkit-animation-fill-mode: both;

  8. animation-fill-mode: both;

  9. -webkit-animation: load7 1.8s infinite ease-in-out;

  10. animation: load7 1.8s infinite ease-in-out;

  11. }

  12. #loader7 {

  13. margin: 60px 50px;

  14. float: left;

  15. font-size: 10px;

  16. position: relative;

  17. text-indent: -9999em;

  18. -webkit-animation-delay: 0.16s;

  19. animation-delay: 0.16s;

  20. }

  21. #loader7:before {

  22. left: -3.5em;

  23. }

  24. #loader7:after {

  25. left: 3.5em;

  26. -webkit-animation-delay: 0.32s;

  27. animation-delay: 0.32s;

  28. }

  29. #loader7:before,

  30. #loader7:after {

  31. content: '';

  32. position: absolute;

  33. top: 0;

  34. }

  35. @-webkit-keyframes load7 {

  36. 0%,

  37. 80%,

  38. 100% {

  39. box-shadow: 0 2.5em 0 -1.3em #000000;

  40. }

  41. 40% {

  42. box-shadow: 0 2.5em 0 0 #000000;

  43. }

  44. }

  45. @keyframes load7 {

  46. 0%,

  47. 80%,

  48. 100% {

  49. box-shadow: 0 2.5em 0 -1.3em #000000;

  50. }

  51. 40% {

  52. box-shadow: 0 2.5em 0 0 #000000;

  53. }

  54. }

      8.圆环旋转加载动画:

 

      

 
  1. #loader8 {

  2. margin: 30px 50px;

  3. float: left;

  4. font-size: 10px;

  5. position: relative;

  6. text-indent: -9999em;

  7. border-top: 1.1em solid rgba(255, 128, 0, 0.2);

  8. border-right: 1.1em solid rgba(255, 128, 0, 0.2);

  9. border-bottom: 1.1em solid rgba(255, 128, 0, 0.2);

  10. border-left: 1.1em solid rgba(255, 128, 0, 1);

  11. -webkit-animation: load8 1.1s infinite linear;

  12. animation: load8 1.1s infinite linear;

  13. }

  14. #loader8,

  15. #loader8:after {

  16. border-radius: 50%;

  17. width: 10em;

  18. height: 10em;

  19. }

  20. @-webkit-keyframes load8 {

  21. 0% {

  22. -webkit-transform: rotate(0deg);

  23. transform: rotate(0deg);

  24. }

  25. 100% {

  26. -webkit-transform: rotate(360deg);

  27. transform: rotate(360deg);

  28. }

  29. }

  30. @keyframes load8 {

  31. 0% {

  32. -webkit-transform: rotate(0deg);

  33. transform: rotate(0deg);

  34. }

  35. 100% {

  36. -webkit-transform: rotate(360deg);

  37. transform: rotate(360deg);

  38. }

  39. }

     完整的示例Demo:

 

     

 
  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>CSS3绘制加载动画</title>

  6. <style>

  7. #loader1,

  8. #loader1:before,

  9. #loader1:after {

  10. background: #f2fa08;

  11. -webkit-animation: load1 1s infinite ease-in-out;

  12. animation: load1 1s infinite ease-in-out;

  13. width: 1em;

  14. height: 4em;

  15. }

  16. #loader1:before,

  17. #loader1:after {

  18. position: absolute;

  19. top: 0;

  20. content: '';

  21. }

  22. #loader1:before {

  23. left: -1.5em;

  24. }

  25. #loader1 {

  26. text-indent: -9999em;

  27. margin: 50px 50px;

  28. position: relative;

  29. float: left;

  30. font-size: 11px;

  31. -webkit-animation-delay: 0.16s;

  32. animation-delay: 0.16s;

  33. }

  34. #loader1:after {

  35. left: 1.5em;

  36. -webkit-animation-delay: 0.32s;

  37. animation-delay: 0.32s;

  38. }

  39. @-webkit-keyframes load1 {

  40. 0%,

  41. 80%,

  42. 100% {

  43. box-shadow: 0 0 #f2fa08;

  44. height: 4em;

  45. }

  46. 40% {

  47. box-shadow: 0 -2em #f2fa08;

  48. height: 5em;

  49. }

  50. }

  51. @keyframes load1 {

  52. 0%,

  53. 80%,

  54. 100% {

  55. box-shadow: 0 0 #f2ff08;

  56. height: 4em;

  57. }

  58. 40% {

  59. box-shadow: 0 -2em #f2ff08;

  60. height: 5em;

  61. }

  62. }

  63.  
  64. #loader2,

  65. #loader2:before,

  66. #loader2:after {

  67. border-radius: 50%;

  68. }

  69. #loader2:before,

  70. #loader2:after {

  71. position: absolute;

  72. content: '';

  73. }

  74. #loader2:before {

  75. width: 5.2em;

  76. height: 10.2em;

  77. background: #ffffff;

  78. border-radius: 10.2em 0 0 10.2em;

  79. top: -0.1em;

  80. left: -0.1em;

  81. -webkit-transform-origin: 5.2em 5.1em;

  82. transform-origin: 5.2em 5.1em;

  83. -webkit-animation: load2 2s infinite ease 1.5s;

  84. animation: load2 2s infinite ease 1.5s;

  85. }

  86. #loader2 {

  87. font-size: 11px;

  88. text-indent: -99999em;

  89. margin: 20px 20px;

  90. position: relative;

  91. float: left;

  92. width: 10em;

  93. height: 10em;

  94. box-shadow: inset 0 0 0 1em #ff0f88;

  95. }

  96. #loader2:after {

  97. width: 5.2em;

  98. height: 10.2em;

  99. background: #ffffff;

  100. border-radius: 0 10.2em 10.2em 0;

  101. top: -0.1em;

  102. left: 5.1em;

  103. -webkit-transform-origin: 0px 5.1em;

  104. transform-origin: 0px 5.1em;

  105. -webkit-animation: load2 2s infinite ease;

  106. animation: load2 2s infinite ease;

  107. }

  108. @-webkit-keyframes load2 {

  109. 0% {

  110. -webkit-transform: rotate(0deg);

  111. transform: rotate(0deg);

  112. }

  113. 100% {

  114. -webkit-transform: rotate(360deg);

  115. transform: rotate(360deg);

  116. }

  117. }

  118. @keyframes load2 {

  119. 0% {

  120. -webkit-transform: rotate(0deg);

  121. transform: rotate(0deg);

  122. }

  123. 100% {

  124. -webkit-transform: rotate(360deg);

  125. transform: rotate(360deg);

  126. }

  127. }

  128.  
  129. #load3,

  130. #loader3 {

  131. font-size: 20px;

  132. margin: 80px 50px;

  133. float: left;

  134. width: 1em;

  135. height: 1em;

  136. border-radius: 50%;

  137. position: relative;

  138. text-indent: -9999em;

  139. -webkit-animation: load3 1.3s infinite linear;

  140. animation: load3 1.3s infinite linear;

  141. }

  142. @-webkit-keyframes load3 {

  143. 0%,

  144. 100% {

  145. box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,

  146. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  147. 0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  148. -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;

  149. }

  150. 12.5% {

  151. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,

  152. 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,

  153. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  154. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  155. }

  156. 25% {

  157. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,

  158. 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,

  159. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  160. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  161. }

  162. 37.5% {

  163. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  164. 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,

  165. 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,

  166. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  167. }

  168. 50% {

  169. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  170. 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,

  171. 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,

  172. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  173. }

  174. 62.5% {

  175. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  176. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  177. 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,

  178. -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;

  179. }

  180. 75% {

  181. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  182. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  183. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  184. -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;

  185. }

  186. 87.5% {

  187. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,

  188. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  189. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  190. -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;

  191. }

  192. }

  193. @keyframes load3 {

  194. 0%,

  195. 100% {

  196. box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,

  197. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  198. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  199. -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;

  200. }

  201. 12.5% {

  202. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,

  203. 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,

  204. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  205. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  206. }

  207. 25% {

  208. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,

  209. 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,

  210. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  211. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  212. }

  213. 37.5% {

  214. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  215. 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,

  216. 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,

  217. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  218. }

  219. 50% {

  220. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  221. 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,

  222. 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,

  223. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  224. }

  225. 62.5% {

  226. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  227. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  228. 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,

  229. -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;

  230. }

  231. 75% {

  232. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  233. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  234. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  235. -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;

  236. }

  237. 87.5% {

  238. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,

  239. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  240. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  241. -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;

  242. }

  243. }

  244.  
  245. #loader4 {

  246. font-size: 10px;

  247. margin: 20px 20px;

  248. float: left;

  249. text-indent: -9999em;

  250. width: 11em;

  251. height: 11em;

  252. border-radius: 50%;

  253. background: #ffffff;

  254. background: -moz-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  255. background: -webkit-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  256. background: -o-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  257. background: -ms-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  258. background: linear-gradient(to right, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  259. position: relative;

  260. -webkit-animation: load4 1.4s infinite linear;

  261. animation: load4 1.4s infinite linear;

  262. }

  263. #loader4:before {

  264. width: 50%;

  265. height: 50%;

  266. background: #ff00ff;

  267. border-radius: 100% 0 0 0;

  268. position: absolute;

  269. top: 0;

  270. left: 0;

  271. content: '';

  272. }

  273. #loader4:after {

  274. background: #ffffff;

  275. width: 75%;

  276. height: 75%;

  277. border-radius: 50%;

  278. content: '';

  279. margin: auto;

  280. position: absolute;

  281. top: 0;

  282. left: 0;

  283. bottom: 0;

  284. right: 0;

  285. }

  286. @-webkit-keyframes load4 {

  287. 0% {

  288. -webkit-transform: rotate(0deg);

  289. transform: rotate(0deg);

  290. }

  291. 100% {

  292. -webkit-transform: rotate(360deg);

  293. transform: rotate(360deg);

  294. }

  295. }

  296. @keyframes load4 {

  297. 0% {

  298. -webkit-transform: rotate(0deg);

  299. transform: rotate(0deg);

  300. }

  301. 100% {

  302. -webkit-transform: rotate(360deg);

  303. transform: rotate(360deg);

  304. }

  305. }

  306.  
  307. #load5,

  308. #loader5 {

  309. margin: 80px 50px;

  310. float: left;

  311. font-size: 25px;

  312. width: 1em;

  313. height: 1em;

  314. border-radius: 50%;

  315. position: relative;

  316. text-indent: -9999em;

  317. -webkit-animation: load5 1.1s infinite ease;

  318. animation: load5 1.1s infinite ease;

  319. }

  320. @-webkit-keyframes load5 {

  321. 0%,

  322. 100% {

  323. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  324. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  325. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  326. -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);

  327. }

  328. 12.5% {

  329. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),

  330. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  331. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  332. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);

  333. }

  334. 25% {

  335. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),

  336. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  337. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  338. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  339. }

  340. 37.5% {

  341. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),

  342. 2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  343. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  344. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  345. }

  346. 50% {

  347. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  348. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),

  349. 0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),

  350. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  351. }

  352. 62.5% {

  353. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  354. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),

  355. 0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),

  356. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  357. }

  358. 75% {

  359. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  360. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  361. 0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),

  362. -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  363. }

  364. 87.5% {

  365. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  366. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  367. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),

  368. -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);

  369. }

  370. }

  371. @keyframes load5 {

  372. 0%,

  373. 100% {

  374. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  375. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  376. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  377. -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);

  378. }

  379. 12.5% {

  380. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),

  381. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  382. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  383. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);

  384. }

  385. 25% {

  386. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),

  387. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  388. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  389. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  390. }

  391. 37.5% {

  392. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),

  393. 2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  394. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  395. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  396. }

  397. 50% {

  398. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  399. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),

  400. 0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),

  401. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  402. }

  403. 62.5% {

  404. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  405. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),

  406. 0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),

  407. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  408. }

  409. 75% {

  410. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  411. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  412. 0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),

  413. -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  414. }

  415. 87.5% {

  416. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  417. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  418. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),

  419. -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);

  420. }

  421. }

  422.  
  423. #loader6 {

  424. margin: 60px 50px;

  425. float: left;

  426. font-size: 90px;

  427. text-indent: -9999em;

  428. overflow: hidden;

  429. width: 1em;

  430. height: 1em;

  431. border-radius: 50%;

  432. position: relative;

  433. -webkit-animation: load6 1.7s infinite ease;

  434. animation: load6 1.7s infinite ease;

  435. }

  436. @-webkit-keyframes load6 {

  437. 0% {

  438. -webkit-transform: rotate(0deg);

  439. transform: rotate(0deg);

  440. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  441. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  442. -0.11em -0.83em 0 -0.477em #ff0000;

  443. }

  444. 5%,

  445. 95% {

  446. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  447. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  448. -0.11em -0.83em 0 -0.477em #ff0000;

  449. }

  450. 30% {

  451. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,

  452. -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,

  453. -0.81em 0.21em 0 -0.477em #ff0000;

  454. }

  455. 55% {

  456. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,

  457. -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,

  458. -0.57em -0.61em 0 -0.477em #ff0000;

  459. }

  460. 100% {

  461. -webkit-transform: rotate(360deg);

  462. transform: rotate(360deg);

  463. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  464. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  465. -0.11em -0.83em 0 -0.477em #ff0000;

  466. }

  467. }

  468. @keyframes load6 {

  469. 0% {

  470. -webkit-transform: rotate(0deg);

  471. transform: rotate(0deg);

  472. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  473. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  474. -0.11em -0.83em 0 -0.477em #ff0000;

  475. }

  476. 5%,

  477. 95% {

  478. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  479. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  480. -0.11em -0.83em 0 -0.477em #ff0000;

  481. }

  482. 30% {

  483. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,

  484. -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,

  485. -0.81em 0.21em 0 -0.477em #ff0000;

  486. }

  487. 55% {

  488. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,

  489. -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,

  490. -0.57em -0.61em 0 -0.477em #ff0000;

  491. }

  492. 100% {

  493. -webkit-transform: rotate(360deg);

  494. transform: rotate(360deg);

  495. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  496. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  497. -0.11em -0.83em 0 -0.477em #ff0000;

  498. }

  499. }

  500.  
  501. #loader7:before,

  502. #loader7:after,

  503. #loader7 {

  504. border-radius: 50%;

  505. width: 2.5em;

  506. height: 2.5em;

  507. -webkit-animation-fill-mode: both;

  508. animation-fill-mode: both;

  509. -webkit-animation: load7 1.8s infinite ease-in-out;

  510. animation: load7 1.8s infinite ease-in-out;

  511. }

  512. #loader7 {

  513. margin: 60px 50px;

  514. float: left;

  515. font-size: 10px;

  516. position: relative;

  517. text-indent: -9999em;

  518. -webkit-animation-delay: 0.16s;

  519. animation-delay: 0.16s;

  520. }

  521. #loader7:before {

  522. left: -3.5em;

  523. }

  524. #loader7:after {

  525. left: 3.5em;

  526. -webkit-animation-delay: 0.32s;

  527. animation-delay: 0.32s;

  528. }

  529. #loader7:before,

  530. #loader7:after {

  531. content: '';

  532. position: absolute;

  533. top: 0;

  534. }

  535. @-webkit-keyframes load7 {

  536. 0%,

  537. 80%,

  538. 100% {

  539. box-shadow: 0 2.5em 0 -1.3em #000000;

  540. }

  541. 40% {

  542. box-shadow: 0 2.5em 0 0 #000000;

  543. }

  544. }

  545. @keyframes load7 {

  546. 0%,

  547. 80%,

  548. 100% {

  549. box-shadow: 0 2.5em 0 -1.3em #000000;

  550. }

  551. 40% {

  552. box-shadow: 0 2.5em 0 0 #000000;

  553. }

  554. }

  555.  
  556. #loader8 {

  557. margin: 30px 50px;

  558. float: left;

  559. font-size: 10px;

  560. position: relative;

  561. text-indent: -9999em;

  562. border-top: 1.1em solid rgba(255, 128, 0, 0.2);

  563. border-right: 1.1em solid rgba(255, 128, 0, 0.2);

  564. border-bottom: 1.1em solid rgba(255, 128, 0, 0.2);

  565. border-left: 1.1em solid rgba(255, 128, 0, 1);

  566. -webkit-animation: load8 1.1s infinite linear;

  567. animation: load8 1.1s infinite linear;

  568. }

  569. #loader8,

  570. #loader8:after {

  571. border-radius: 50%;

  572. width: 10em;

  573. height: 10em;

  574. }

  575. @-webkit-keyframes load8 {

  576. 0% {

  577. -webkit-transform: rotate(0deg);

  578. transform: rotate(0deg);

  579. }

  580. 100% {

  581. -webkit-transform: rotate(360deg);

  582. transform: rotate(360deg);

  583. }

  584. }

  585. @keyframes load8 {

  586. 0% {

  587. -webkit-transform: rotate(0deg);

  588. transform: rotate(0deg);

  589. }

  590. 100% {

  591. -webkit-transform: rotate(360deg);

  592. transform: rotate(360deg);

  593. }

  594. }

  595. </style>

  596. </head>

  597. <body>

  598. <div id="loader1" ></div>

  599. <div id="loader2" ></div>

  600. <div id="loader3" ></div>

  601. <div id="loader4" ></div>

  602. <div id="loader5" ></div>

  603. <div id="loader6" ></div>

  604. <div id="loader7" ></div>

  605. <div id="loader8" ></div>

  606. </body>

  607. </html>

 

        参考文档:

         http://www.webhek.com/misc/css-loaders

         http://www.w3cplus.com/css3/transform-origin.html

         http://www.w3school.com.cn/css3/css3_animation.asp

© 著作权归作者所有

海博1600
粉丝 1
博文 14
码字总数 44824
作品 0
岳阳
程序员
私信 提问
程序猿必备的8款web前端SVG动画特效

  1、SVG图片波浪效果渲染动画   今天我们要为大家分享一款很酷的SVG图片动画,主要是图片上会出现波浪的渲染动画。实现原理是在图片上方利用SVG路径绘制了一层蒙板,然后蒙版进行一定的...

爱前端
2017/12/06
0
0
12个炫酷实用的HTML5带发光动画

在网页设计中,很多元素都可以实现发光的动画效果,比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用...

fishzhang8
2017/09/25
2
0
程序猿必备的10款超有趣的SVG绘制动画赏析

  SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们...

爱前端
2017/12/05
0
0
大爱HTML5 9款超炫HTML5最新动画源码

我们分享过很多漂亮的HTML5动画,包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看。 1、HTML5可爱的404页面动画 很逗的机器人 很久以...

ruby_chen
2014/04/02
5.5K
5
CSS3多方块波浪形Loading加载动画

CSS3多方块波浪形Loading加载动画 HTML5资源教程2017-12-073 阅读 css3loading动画 记得以前我们分享过很多基于CSS3和SVG的Loading加载动画,大都是环形的外观,比如这款 纯CSS3发光圆环Loa...

HTML5资源教程
2017/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Centos7 python2.7和yum完全卸载及重装

                                     完全重装python和yum 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 1、删除现有...

roockee
35分钟前
6
0
【软件工程】绪论,深入浅出理解软件工程

软件和软件工程 什么是软件工程 软件工程是贯穿整个软件生命周期的工程学和方法论及其使用的工具(我说的) 软件工程要解决那些问题 软件的研发周期过长 软件开发成本居高不下 软件在交付之前...

丌官尚雄
42分钟前
7
0
无回路有向图的拓扑排序

因公司业务需要,在表单中每个字段都会配置自动计算,但自动计算公式中会引用到其他字段中的值。所以希望可以根据计算公式,优先计算引用的公式。所以最终使用了无回路有向图的扩扑排序来实现...

兜兜毛毛
今天
7
0
如何抢占云栖大会C位?史上最强强强攻略来了

点击观看视频: APSARA云栖大会开发者情怀 原文链接 本文为云栖社区原创内容,未经允许不得转载。

阿里云官方博客
今天
6
0
Kubernetes 从懵圈到熟练:集群服务的三个要点和一种实现

作者 | 声东 阿里云售后技术专家 文章来源:Docker,点击查看原文。 以我的经验来讲,理解 Kubernetes 集群服务的概念,是比较不容易的一件事情。尤其是当我们基于似是而非的理解,去排查服务...

阿里巴巴云原生
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部