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

最新推荐文章于 2024-05-14 02:47:37 发布
最新推荐文章于 2024-05-14 02:47:37 发布
阅读量215 收藏 2
点赞数
文章标签： python 前端 ViewUI
原文链接：https://my.oschina.net/u/3264768/blog/1842020
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

   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轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。

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

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

     matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。
 ● 3D transform常用的transform-function的功能:
      translate3d()：移元素元素，用来指定一个3D变形移动位移量。
      translate()：指定3Ｄ位移在Ｚ轴的位移量。
      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

转载于:https://my.oschina.net/u/3264768/blog/1842020

weixin_34267123
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
weixin_29465407的博客
06-04 856
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的，每一个加载动画都构思新颖，效果非常的酷。安装可以通过bower来按钮这个loading动画特效：bower install loaders.css使用方法使用这个loading加载动画特效的时候，建议将效果中所需要的H...
请务必收下这10+个加载特效
frontend_frank的博客
12-17 2659
☀️ 前言相信大家经常会使用到加载动画，但是大部分组件库的加载样式都太简洁了????。这次给前端工友们收集了10+个高逼格加载动画效果！！复制就能直接用！！????⛷️ 来吧展示1、一个"滚动"加载跳...
CSS3绘制8种超炫的加载动画
火雨(Nick)
04-20 1万+
CSS3绘制8种超炫的加载动画     逛前端开发网站的时候，偶尔发现一组非常炫酷的CSS3加载动画，遂迫不及待的做个Demo保存下来。         这些加载动画用到了CSS3的旋转transform属性，颜色透明度设置和伪元素操作等CSS技术。奇妙的组合，产生了意想不到的效果。         1.上下起伏波动的加载动画：          #loader1, #loade
CSS加载动画效果
最新发布
2301_78399805的博客
05-14 278
CSS3的结构伪类选择器控制 匹配除了第一个以外的儿子，延时产生感觉，哈哈，为啥不可以直接写在一个里好比。/* 名字 执行时间 一直执行 先慢再快再慢 *//* 伪类选择器控制 匹配除了第一个以外的儿子，延时产生感觉*/不懂，可能还需要完善吧！/* 定义关键帧 */
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
50个纯css3加载动画效果
ICode联盟
12-19 614
下载地址 dd:
CSS3实现10种Loading效果
dgqvhtlwq472235338的博客
06-19 351
原文：http://www.open-open.com/code/view/1436164419895 昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记…… 第1种效果： 代码如下： <div class="loading"> <span></span> ...
CSS3绘制超炫的上下起伏波动进度加载动画
09-24
总结来说，这个上下起伏波动的进度加载动画利用了CSS3的多个强大特性，如伪元素、动画关键帧、变换和颜色控制，创造出一种生动且吸引人的加载体验。对于开发者来说，理解并掌握这些技术不仅能提升网页的视觉效果，也...
纯css3绘制超炫六边形加载动画特效源码.zip
11-01
本资源“纯css3绘制超炫六边形加载动画特效源码.zip”聚焦于利用CSS3的新特性来创建引人注目的六边形加载动画效果。这种特效能够为网站或应用增添互动性和视觉吸引力，提升用户体验。 首先，让我们深入理解CSS3中的...
css3超炫loading加载特效.zip
11-16
3. `<video>` 和 `<audio>`：在视频或音频加载时，可以使用这些元素的事件来同步加载动画。 综上所述，利用CSS3的动画特性，我们可以创建出各种各样的超炫loading加载特效，结合JavaScript和jQuery实现更精细的控制...
纯CSS3实现各种loading效果
qq_39025670的博客
07-26 9450
通过CSS3实现一些炫酷的loading动画效果...
十六种炫酷纯css加载动画（一）
孟繁胜游的博客
12-12 7465
一个好的开篇，会给你这个项目增加不少分值。 有没有遇到过打开页面加载一段时间，页面内容才加载出来。在等待加载的过程中页面却是空白页，给用户的体验特别不好，会让项目降一个档次。下面的十六种炫酷炸裂的css加载动画，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，对，就是纯css3的炫酷加载动画，请看效果！ 码字不易，且行且珍惜。 加载1 css源码 .title{ width:...
使用纯css3制作好看的加载特效
qq_44771388的博客
12-21 324
使用css3制作好看的加载特效 效果图 <div class="father"> <div id="text">loading....</div> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> <div cla
用 CSS3 动画功能，做一个有逼格的加载动画
04-08 644
用 CSS3 动画功能，做一个有逼格的加载动画 主要用到的知识点： 参阅菜鸟教程： http://www.runoob.com/css3/css3-animations.html frame animation / 动画延时 flex 实现 HTML <div class="loading"> <div class="loading-1 loading-item...
CSS实现loading加载动画
weixin_43541158的博客
04-25 1086
CSS实现loading加载动画效果
CSS3实现动画加载效果
m0_46219714的博客
10-06 1737
【代码】CSS3实现动画加载效果。
css3实现加载中的转圈圈效果载入动画，看完简直觉得自己又强大了一点点
qq_31676725的博客
11-06 3326
先看效果 人很话不多，直接上代码 css .aaa{ width: 50px; height: 50px; position: relative; margin: 0 auto; background-color: #000000; } .aaa span{ width: 8px; height: 8px; background-color: #fff; position: absolute; border-radius: 50%; -webkit-animation: load 1
CSS特效009：音频波纹加载律动
大剑师兰特的GIS世界
11-14 3216
css实战中，如何制作音频波纹加载律动效果呢？实际上很简单，主要用到keyframes状态的不同阶段，设置不同柱状条的高度、背景色、距顶部高度等。然后再来个动画无限大循环。
CSS3创建加载动画效果
kaikai4的专栏
07-21 1528
加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等，而加载动画能够在内容加载完成前给用户视觉反馈，从而能够吸引用户而不让他们直接放弃继续浏览你的网站。 创建加载效果所需的CSS3知识 在我们开始创建加载动画之前，我们得先了解一些CSS3的属性来帮助我们创建这些效果。 伪元素 :before :after 伪元素对于制作CSS3加载动画是非常有用
ease、linear、ease-in、ease-out、ease-in-out
04-06
这些术语常常用于描述动画或过渡效果的缓动函数。它们实际上是一种数学函数，用于控制动画过程中的速度和加速度变化。 - ease：是一种默认的缓动函数，它在动画开始和结束时会变慢，但在中间阶段会加速。这种缓动函数通常被用于平滑过渡。 - linear：是一种匀速的缓动函数，它保持恒定的速度，不会加速或减速。这种缓动函数通常被用于简单的动画效果。 - ease-in：是一种从慢到快的缓动函数，它会在动画开始时慢慢加速，直到达到最大速度。这种缓动函数通常被用于给人一种渐进式加速的感觉。 - ease-out：是一种从快到慢的缓动函数，它会在动画结束时慢慢减速，直到停止。这种缓动函数通常被用于给人一种渐进式减速的感觉。 - ease-in-out：是一种先慢后快再慢的缓动函数，它会在动画开始和结束时都慢慢加速和减速，中间阶段保持最大速度。这种缓动函数通常被用于给人一种平滑的感觉。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值