经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
CSS 实现各种 Loading 效果附带解析过程_CSS教程_CSS
来源:jb51  时间:2021/2/19 15:27:41  对本文有异议

HTML

  1. <div class="spinner"></div>

CSS

  1. .spinner {
  2. width: 40px;
  3. height: 40px;
  4. background-color: #333;
  5.  
  6. margin: 100px auto;
  7. -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  8. animation: sk-rotateplane 1.2s infinite ease-in-out;
  9. }
  10.  
  11. @-webkit-keyframes sk-rotateplane {
  12. 0% { -webkit-transform: perspective(120px) }
  13. 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  14. 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
  15. }
  16.  
  17. @keyframes sk-rotateplane {
  18. 0% {
  19. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  20. -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  21. } 50% {
  22. transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  23. -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  24. } 100% {
  25. transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  26. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  27. }
  28. }

解析:定义一个 div元素,设置边长为 40px 背景白色的正方形,然后设置循环翻转动画实现该加载效果动画

perspective 属性定义 3D 元素距视图的距离

HTML

  1. <div class="sk-chase">
  2. <div class="sk-chase-dot"></div>
  3. <div class="sk-chase-dot"></div>
  4. <div class="sk-chase-dot"></div>
  5. <div class="sk-chase-dot"></div>
  6. <div class="sk-chase-dot"></div>
  7. <div class="sk-chase-dot"></div>
  8. </div>

CSS

  1. .sk-chase {
  2. width: 40px;
  3. height: 40px;
  4. position: relative;
  5. animation: sk-chase 2.5s infinite linear both;
  6. }
  7.  
  8. .sk-chase-dot {
  9. width: 100%;
  10. height: 100%;
  11. position: absolute;
  12. left: 0;
  13. top: 0;
  14. animation: sk-chase-dot 2.0s infinite ease-in-out both;
  15. }
  16.  
  17. .sk-chase-dot:before {
  18. content: '';
  19. display: block;
  20. width: 25%;
  21. height: 25%;
  22. background-color: #fff;
  23. border-radius: 100%;
  24. animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
  25. }
  26.  
  27. .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
  28. .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
  29. .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
  30. .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
  31. .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
  32. .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
  33. .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
  34. .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
  35. .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
  36. .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
  37. .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
  38. .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
  39.  
  40. @keyframes sk-chase {
  41. 100% { transform: rotate(360deg); }
  42. }
  43.  
  44. @keyframes sk-chase-dot {
  45. 80%, 100% { transform: rotate(360deg); }
  46. }
  47.  
  48. @keyframes sk-chase-dot-before {
  49. 50% {
  50. transform: scale(0.4);
  51. } 100%, 0% {
  52. transform: scale(1.0);
  53. }
  54. }

解析:定义一个父元素 div,内含六个白色实心圆点,添加旋转动画,通过设置不同的延迟时间来达到依次出现的效果

HTML

  1. <div class="spinner">
  2. <div class="double-bounce1"></div>
  3. <div class="double-bounce2"></div>
  4. </div>

CSS

  1. .spinner {
  2. width: 40px;
  3. height: 40px;
  4.  
  5. position: relative;
  6. margin: 100px auto;
  7. }
  8.  
  9. .double-bounce1, .double-bounce2 {
  10. width: 100%;
  11. height: 100%;
  12. border-radius: 50%;
  13. background-color: #333;
  14. opacity: 0.6;
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  19. animation: sk-bounce 2.0s infinite ease-in-out;
  20. }
  21.  
  22. .double-bounce2 {
  23. -webkit-animation-delay: -1.0s;
  24. animation-delay: -1.0s;
  25. }
  26.  
  27. @-webkit-keyframes sk-bounce {
  28. 0%, 100% { -webkit-transform: scale(0.0) }
  29. 50% { -webkit-transform: scale(1.0) }
  30. }
  31.  
  32. @keyframes sk-bounce {
  33. 0%, 100% {
  34. transform: scale(0.0);
  35. -webkit-transform: scale(0.0);
  36. } 50% {
  37. transform: scale(1.0);
  38. -webkit-transform: scale(1.0);
  39. }
  40. }

解析:两个子元素 div 实现半透明的圆形,设置绝对定位重叠在一起,然后设置相同的动画通过不同的延迟时间交替放大缩小。

HTML

  1. <div class="spinner">
  2. <div class="rect1"></div>
  3. <div class="rect2"></div>
  4. <div class="rect3"></div>
  5. <div class="rect4"></div>
  6. <div class="rect5"></div>
  7. </div>

CSS

  1. .spinner {
  2. margin: 100px auto;
  3. width: 50px;
  4. height: 40px;
  5. text-align: center;
  6. font-size: 10px;
  7. }
  8.  
  9. .spinner > div {
  10. background-color: #333;
  11. height: 100%;
  12. width: 6px;
  13. display: inline-block;
  14. -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  15. animation: sk-stretchdelay 1.2s infinite ease-in-out;
  16. }
  17.  
  18. .spinner .rect2 {
  19. -webkit-animation-delay: -1.1s;
  20. animation-delay: -1.1s;
  21. }
  22.  
  23. .spinner .rect3 {
  24. -webkit-animation-delay: -1.0s;
  25. animation-delay: -1.0s;
  26. }
  27.  
  28. .spinner .rect4 {
  29. -webkit-animation-delay: -0.9s;
  30. animation-delay: -0.9s;
  31. }
  32.  
  33. .spinner .rect5 {
  34. -webkit-animation-delay: -0.8s;
  35. animation-delay: -0.8s;
  36. }
  37.  
  38. @-webkit-keyframes sk-stretchdelay {
  39. 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  40. 20% { -webkit-transform: scaleY(1.0) }
  41. }
  42.  
  43. @keyframes sk-stretchdelay {
  44. 0%, 40%, 100% {
  45. transform: scaleY(0.4);
  46. -webkit-transform: scaleY(0.4);
  47. } 20% {
  48. transform: scaleY(1.0);
  49. -webkit-transform: scaleY(1.0);
  50. }
  51. }

解析:在类名为 spinner元素下有五个 div 实现的长方形元素,设置Y轴的缩放,通过不同的延迟时间来达到依次变化的效果。

HTML

  1. <div class="spinner">
  2. <div class="cube1"></div>
  3. <div class="cube2"></div>
  4. </div>

CSS

  1. .cube1, .cube2 {
  2. background-color: #333;
  3. width: 15px;
  4. height: 15px;
  5. position: absolute;
  6. top: 0;
  7. left: 0;
  8. -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  9. animation: sk-cubemove 1.8s infinite ease-in-out;
  10. }
  11.  
  12. .cube2 {
  13. -webkit-animation-delay: -0.9s;
  14. animation-delay: -0.9s;
  15. }
  16.  
  17. @-webkit-keyframes sk-cubemove {
  18. 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  19. 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  20. 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  21. 100% { -webkit-transform: rotate(-360deg) }
  22. }
  23.  
  24. @keyframes sk-cubemove {
  25. 25% {
  26. transform: translateX(42px) rotate(-90deg) scale(0.5);
  27. -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  28. } 50% {
  29. transform: translateX(42px) translateY(42px) rotate(-179deg);
  30. -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  31. } 50.1% {
  32. transform: translateX(42px) translateY(42px) rotate(-180deg);
  33. -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  34. } 75% {
  35. transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  36. -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  37. } 100% {
  38. transform: rotate(-360deg);
  39. -webkit-transform: rotate(-360deg);
  40. }
  41. }

解析:两个子元素实现白色的方块,添加动画属性,在X轴和Y轴分别设置移动距离和缩放,通过不同的延迟时间来分离他们,rorate实现围绕中心旋转。

HTML

  1. <div class="spinner"></div>

CSS

  1. .spinner {
  2. width: 40px;
  3. height: 40px;
  4. margin: 100px auto;
  5. background-color: #333;
  6.  
  7. border-radius: 100%;
  8. -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  9. animation: sk-scaleout 1.0s infinite ease-in-out;
  10. }
  11.  
  12. @-webkit-keyframes sk-scaleout {
  13. 0% { -webkit-transform: scale(0) }
  14. 100% {
  15. -webkit-transform: scale(1.0);
  16. opacity: 0;
  17. }
  18. }
  19.  
  20. @keyframes sk-scaleout {
  21. 0% {
  22. -webkit-transform: scale(0);
  23. transform: scale(0);
  24. } 100% {
  25. -webkit-transform: scale(1.0);
  26. transform: scale(1.0);
  27. opacity: 0;
  28. }
  29. }

解析:唯一的 div元素实现白色背景圆点,通过设置缩放和透明度实现呼吸灯的效果。

HTML

  1. <div class="spinner">
  2. <div class="dot1"></div>
  3. <div class="dot2"></div>
  4. </div>

CSS

  1. .spinner {
  2. margin: 100px auto;
  3. width: 40px;
  4. height: 40px;
  5. position: relative;
  6. text-align: center;
  7. -webkit-animation: sk-rotate 2.0s infinite linear;
  8. animation: sk-rotate 2.0s infinite linear;
  9. }
  10.  
  11. .dot1, .dot2 {
  12. width: 60%;
  13. height: 60%;
  14. display: inline-block;
  15. position: absolute;
  16. top: 0;
  17. background-color: #333;
  18. border-radius: 100%;
  19. -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  20. animation: sk-bounce 2.0s infinite ease-in-out;
  21. }
  22.  
  23. .dot2 {
  24. top: auto;
  25. bottom: 0;
  26. -webkit-animation-delay: -1.0s;
  27. animation-delay: -1.0s;
  28. }
  29.  
  30. @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
  31. @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
  32.  
  33. @-webkit-keyframes sk-bounce {
  34. 0%, 100% { -webkit-transform: scale(0.0) }
  35. 50% { -webkit-transform: scale(1.0) }
  36. }
  37.  
  38. @keyframes sk-bounce {
  39. 0%, 100% {
  40. transform: scale(0.0);
  41. -webkit-transform: scale(0.0);
  42. } 50% {
  43. transform: scale(1.0);
  44. -webkit-transform: scale(1.0);
  45. }
  46. }

解析:两个实心圆形围绕中心做循环的缩放旋转运动,因为不同的延迟时间来达到它们同一时间呈现相反的表现。

HTML

  1. <div class="spinner">
  2. <div class="bounce1"></div>
  3. <div class="bounce2"></div>
  4. <div class="bounce3"></div>
  5. </div>

CSS

  1. .spinner {
  2. margin: 100px auto 0;
  3. width: 70px;
  4. text-align: center;
  5. }
  6.  
  7. .spinner > div {
  8. width: 18px;
  9. height: 18px;
  10. background-color: #333;
  11.  
  12. border-radius: 100%;
  13. display: inline-block;
  14. -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  15. animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  16. }
  17.  
  18. .spinner .bounce1 {
  19. -webkit-animation-delay: -0.32s;
  20. animation-delay: -0.32s;
  21. }
  22.  
  23. .spinner .bounce2 {
  24. -webkit-animation-delay: -0.16s;
  25. animation-delay: -0.16s;
  26. }
  27.  
  28. @-webkit-keyframes sk-bouncedelay {
  29. 0%, 80%, 100% { -webkit-transform: scale(0) }
  30. 40% { -webkit-transform: scale(1.0) }
  31. }
  32.  
  33. @keyframes sk-bouncedelay {
  34. 0%, 80%, 100% {
  35. -webkit-transform: scale(0);
  36. transform: scale(0);
  37. } 40% {
  38. -webkit-transform: scale(1.0);
  39. transform: scale(1.0);
  40. }
  41. }

解析:三个实色圆形横向排列,线性动画 scale从0到1,通过给它们不同的延迟时间,呈现依次交替的效果。

HTML

  1. <div class="sk-circle">
  2. <div class="sk-circle1 sk-child"></div>
  3. <div class="sk-circle2 sk-child"></div>
  4. <div class="sk-circle3 sk-child"></div>
  5. <div class="sk-circle4 sk-child"></div>
  6. <div class="sk-circle5 sk-child"></div>
  7. <div class="sk-circle6 sk-child"></div>
  8. <div class="sk-circle7 sk-child"></div>
  9. <div class="sk-circle8 sk-child"></div>
  10. <div class="sk-circle9 sk-child"></div>
  11. <div class="sk-circle10 sk-child"></div>
  12. <div class="sk-circle11 sk-child"></div>
  13. <div class="sk-circle12 sk-child"></div>
  14. </div>

CSS

  1. .sk-circle {
  2. margin: 100px auto;
  3. width: 40px;
  4. height: 40px;
  5. position: relative;
  6. }
  7. .sk-circle .sk-child {
  8. width: 100%;
  9. height: 100%;
  10. position: absolute;
  11. left: 0;
  12. top: 0;
  13. }
  14. .sk-circle .sk-child:before {
  15. content: '';
  16. display: block;
  17. margin: 0 auto;
  18. width: 15%;
  19. height: 15%;
  20. background-color: #333;
  21. border-radius: 100%;
  22. -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  23. animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  24. }
  25. .sk-circle .sk-circle2 {
  26. -webkit-transform: rotate(30deg);
  27. -ms-transform: rotate(30deg);
  28. transform: rotate(30deg); }
  29. .sk-circle .sk-circle3 {
  30. -webkit-transform: rotate(60deg);
  31. -ms-transform: rotate(60deg);
  32. transform: rotate(60deg); }
  33. .sk-circle .sk-circle4 {
  34. -webkit-transform: rotate(90deg);
  35. -ms-transform: rotate(90deg);
  36. transform: rotate(90deg); }
  37. .sk-circle .sk-circle5 {
  38. -webkit-transform: rotate(120deg);
  39. -ms-transform: rotate(120deg);
  40. transform: rotate(120deg); }
  41. .sk-circle .sk-circle6 {
  42. -webkit-transform: rotate(150deg);
  43. -ms-transform: rotate(150deg);
  44. transform: rotate(150deg); }
  45. .sk-circle .sk-circle7 {
  46. -webkit-transform: rotate(180deg);
  47. -ms-transform: rotate(180deg);
  48. transform: rotate(180deg); }
  49. .sk-circle .sk-circle8 {
  50. -webkit-transform: rotate(210deg);
  51. -ms-transform: rotate(210deg);
  52. transform: rotate(210deg); }
  53. .sk-circle .sk-circle9 {
  54. -webkit-transform: rotate(240deg);
  55. -ms-transform: rotate(240deg);
  56. transform: rotate(240deg); }
  57. .sk-circle .sk-circle10 {
  58. -webkit-transform: rotate(270deg);
  59. -ms-transform: rotate(270deg);
  60. transform: rotate(270deg); }
  61. .sk-circle .sk-circle11 {
  62. -webkit-transform: rotate(300deg);
  63. -ms-transform: rotate(300deg);
  64. transform: rotate(300deg); }
  65. .sk-circle .sk-circle12 {
  66. -webkit-transform: rotate(330deg);
  67. -ms-transform: rotate(330deg);
  68. transform: rotate(330deg); }
  69. .sk-circle .sk-circle2:before {
  70. -webkit-animation-delay: -1.1s;
  71. animation-delay: -1.1s; }
  72. .sk-circle .sk-circle3:before {
  73. -webkit-animation-delay: -1s;
  74. animation-delay: -1s; }
  75. .sk-circle .sk-circle4:before {
  76. -webkit-animation-delay: -0.9s;
  77. animation-delay: -0.9s; }
  78. .sk-circle .sk-circle5:before {
  79. -webkit-animation-delay: -0.8s;
  80. animation-delay: -0.8s; }
  81. .sk-circle .sk-circle6:before {
  82. -webkit-animation-delay: -0.7s;
  83. animation-delay: -0.7s; }
  84. .sk-circle .sk-circle7:before {
  85. -webkit-animation-delay: -0.6s;
  86. animation-delay: -0.6s; }
  87. .sk-circle .sk-circle8:before {
  88. -webkit-animation-delay: -0.5s;
  89. animation-delay: -0.5s; }
  90. .sk-circle .sk-circle9:before {
  91. -webkit-animation-delay: -0.4s;
  92. animation-delay: -0.4s; }
  93. .sk-circle .sk-circle10:before {
  94. -webkit-animation-delay: -0.3s;
  95. animation-delay: -0.3s; }
  96. .sk-circle .sk-circle11:before {
  97. -webkit-animation-delay: -0.2s;
  98. animation-delay: -0.2s; }
  99. .sk-circle .sk-circle12:before {
  100. -webkit-animation-delay: -0.1s;
  101. animation-delay: -0.1s; }
  102.  
  103. @-webkit-keyframes sk-circleBounceDelay {
  104. 0%, 80%, 100% {
  105. -webkit-transform: scale(0);
  106. transform: scale(0);
  107. } 40% {
  108. -webkit-transform: scale(1);
  109. transform: scale(1);
  110. }
  111. }
  112.  
  113. @keyframes sk-circleBounceDelay {
  114. 0%, 80%, 100% {
  115. -webkit-transform: scale(0);
  116. transform: scale(0);
  117. } 40% {
  118. -webkit-transform: scale(1);
  119. transform: scale(1);
  120. }
  121. }

解析:整个加载效果由12个圆心组成,设置不同的旋转让它们呈现圆形环绕,然后设置不同的延迟时间,让它们做缩放运动。

HTML

  1. <div class="sk-cube-grid">
  2. <div class="sk-cube sk-cube1"></div>
  3. <div class="sk-cube sk-cube2"></div>
  4. <div class="sk-cube sk-cube3"></div>
  5. <div class="sk-cube sk-cube4"></div>
  6. <div class="sk-cube sk-cube5"></div>
  7. <div class="sk-cube sk-cube6"></div>
  8. <div class="sk-cube sk-cube7"></div>
  9. <div class="sk-cube sk-cube8"></div>
  10. <div class="sk-cube sk-cube9"></div>
  11. </div>

CSS

  1. .sk-cube-grid {
  2. width: 40px;
  3. height: 40px;
  4. margin: 100px auto;
  5. }
  6.  
  7. .sk-cube-grid .sk-cube {
  8. width: 33%;
  9. height: 33%;
  10. background-color: #333;
  11. float: left;
  12. -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  13. animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  14. }
  15. .sk-cube-grid .sk-cube1 {
  16. -webkit-animation-delay: 0.2s;
  17. animation-delay: 0.2s; }
  18. .sk-cube-grid .sk-cube2 {
  19. -webkit-animation-delay: 0.3s;
  20. animation-delay: 0.3s; }
  21. .sk-cube-grid .sk-cube3 {
  22. -webkit-animation-delay: 0.4s;
  23. animation-delay: 0.4s; }
  24. .sk-cube-grid .sk-cube4 {
  25. -webkit-animation-delay: 0.1s;
  26. animation-delay: 0.1s; }
  27. .sk-cube-grid .sk-cube5 {
  28. -webkit-animation-delay: 0.2s;
  29. animation-delay: 0.2s; }
  30. .sk-cube-grid .sk-cube6 {
  31. -webkit-animation-delay: 0.3s;
  32. animation-delay: 0.3s; }
  33. .sk-cube-grid .sk-cube7 {
  34. -webkit-animation-delay: 0s;
  35. animation-delay: 0s; }
  36. .sk-cube-grid .sk-cube8 {
  37. -webkit-animation-delay: 0.1s;
  38. animation-delay: 0.1s; }
  39. .sk-cube-grid .sk-cube9 {
  40. -webkit-animation-delay: 0.2s;
  41. animation-delay: 0.2s; }
  42.  
  43. @-webkit-keyframes sk-cubeGridScaleDelay {
  44. 0%, 70%, 100% {
  45. -webkit-transform: scale3D(1, 1, 1);
  46. transform: scale3D(1, 1, 1);
  47. } 35% {
  48. -webkit-transform: scale3D(0, 0, 1);
  49. transform: scale3D(0, 0, 1);
  50. }
  51. }
  52.  
  53. @keyframes sk-cubeGridScaleDelay {
  54. 0%, 70%, 100% {
  55. -webkit-transform: scale3D(1, 1, 1);
  56. transform: scale3D(1, 1, 1);
  57. } 35% {
  58. -webkit-transform: scale3D(0, 0, 1);
  59. transform: scale3D(0, 0, 1);
  60. }
  61. }

解析:九个方块通过 grid布局,形成横向纵向分别三块,设置不同的延迟时间让它们做线性 3D 缩放运动。

HTML

  1. <div class="sk-fading-circle">
  2. <div class="sk-circle1 sk-circle"></div>
  3. <div class="sk-circle2 sk-circle"></div>
  4. <div class="sk-circle3 sk-circle"></div>
  5. <div class="sk-circle4 sk-circle"></div>
  6. <div class="sk-circle5 sk-circle"></div>
  7. <div class="sk-circle6 sk-circle"></div>
  8. <div class="sk-circle7 sk-circle"></div>
  9. <div class="sk-circle8 sk-circle"></div>
  10. <div class="sk-circle9 sk-circle"></div>
  11. <div class="sk-circle10 sk-circle"></div>
  12. <div class="sk-circle11 sk-circle"></div>
  13. <div class="sk-circle12 sk-circle"></div>
  14. </div>

CSS

  1. .sk-fading-circle {
  2. margin: 100px auto;
  3. width: 40px;
  4. height: 40px;
  5. position: relative;
  6. }
  7.  
  8. .sk-fading-circle .sk-circle {
  9. width: 100%;
  10. height: 100%;
  11. position: absolute;
  12. left: 0;
  13. top: 0;
  14. }
  15.  
  16. .sk-fading-circle .sk-circle:before {
  17. content: '';
  18. display: block;
  19. margin: 0 auto;
  20. width: 15%;
  21. height: 15%;
  22. background-color: #333;
  23. border-radius: 100%;
  24. -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  25. animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  26. }
  27. .sk-fading-circle .sk-circle2 {
  28. -webkit-transform: rotate(30deg);
  29. -ms-transform: rotate(30deg);
  30. transform: rotate(30deg);
  31. }
  32. .sk-fading-circle .sk-circle3 {
  33. -webkit-transform: rotate(60deg);
  34. -ms-transform: rotate(60deg);
  35. transform: rotate(60deg);
  36. }
  37. .sk-fading-circle .sk-circle4 {
  38. -webkit-transform: rotate(90deg);
  39. -ms-transform: rotate(90deg);
  40. transform: rotate(90deg);
  41. }
  42. .sk-fading-circle .sk-circle5 {
  43. -webkit-transform: rotate(120deg);
  44. -ms-transform: rotate(120deg);
  45. transform: rotate(120deg);
  46. }
  47. .sk-fading-circle .sk-circle6 {
  48. -webkit-transform: rotate(150deg);
  49. -ms-transform: rotate(150deg);
  50. transform: rotate(150deg);
  51. }
  52. .sk-fading-circle .sk-circle7 {
  53. -webkit-transform: rotate(180deg);
  54. -ms-transform: rotate(180deg);
  55. transform: rotate(180deg);
  56. }
  57. .sk-fading-circle .sk-circle8 {
  58. -webkit-transform: rotate(210deg);
  59. -ms-transform: rotate(210deg);
  60. transform: rotate(210deg);
  61. }
  62. .sk-fading-circle .sk-circle9 {
  63. -webkit-transform: rotate(240deg);
  64. -ms-transform: rotate(240deg);
  65. transform: rotate(240deg);
  66. }
  67. .sk-fading-circle .sk-circle10 {
  68. -webkit-transform: rotate(270deg);
  69. -ms-transform: rotate(270deg);
  70. transform: rotate(270deg);
  71. }
  72. .sk-fading-circle .sk-circle11 {
  73. -webkit-transform: rotate(300deg);
  74. -ms-transform: rotate(300deg);
  75. transform: rotate(300deg);
  76. }
  77. .sk-fading-circle .sk-circle12 {
  78. -webkit-transform: rotate(330deg);
  79. -ms-transform: rotate(330deg);
  80. transform: rotate(330deg);
  81. }
  82. .sk-fading-circle .sk-circle2:before {
  83. -webkit-animation-delay: -1.1s;
  84. animation-delay: -1.1s;
  85. }
  86. .sk-fading-circle .sk-circle3:before {
  87. -webkit-animation-delay: -1s;
  88. animation-delay: -1s;
  89. }
  90. .sk-fading-circle .sk-circle4:before {
  91. -webkit-animation-delay: -0.9s;
  92. animation-delay: -0.9s;
  93. }
  94. .sk-fading-circle .sk-circle5:before {
  95. -webkit-animation-delay: -0.8s;
  96. animation-delay: -0.8s;
  97. }
  98. .sk-fading-circle .sk-circle6:before {
  99. -webkit-animation-delay: -0.7s;
  100. animation-delay: -0.7s;
  101. }
  102. .sk-fading-circle .sk-circle7:before {
  103. -webkit-animation-delay: -0.6s;
  104. animation-delay: -0.6s;
  105. }
  106. .sk-fading-circle .sk-circle8:before {
  107. -webkit-animation-delay: -0.5s;
  108. animation-delay: -0.5s;
  109. }
  110. .sk-fading-circle .sk-circle9:before {
  111. -webkit-animation-delay: -0.4s;
  112. animation-delay: -0.4s;
  113. }
  114. .sk-fading-circle .sk-circle10:before {
  115. -webkit-animation-delay: -0.3s;
  116. animation-delay: -0.3s;
  117. }
  118. .sk-fading-circle .sk-circle11:before {
  119. -webkit-animation-delay: -0.2s;
  120. animation-delay: -0.2s;
  121. }
  122. .sk-fading-circle .sk-circle12:before {
  123. -webkit-animation-delay: -0.1s;
  124. animation-delay: -0.1s;
  125. }
  126.  
  127. @-webkit-keyframes sk-circleFadeDelay {
  128. 0%, 39%, 100% { opacity: 0; }
  129. 40% { opacity: 1; }
  130. }
  131.  
  132. @keyframes sk-circleFadeDelay {
  133. 0%, 39%, 100% { opacity: 0; }
  134. 40% { opacity: 1; }
  135. }

解析:加载动画由12个实色圆点360度依次摆开,依次做旋转和透明度的改变。

HTML

  1. <div class="sk-folding-cube">
  2. <div class="sk-cube1 sk-cube"></div>
  3. <div class="sk-cube2 sk-cube"></div>
  4. <div class="sk-cube4 sk-cube"></div>
  5. <div class="sk-cube3 sk-cube"></div>
  6. </div>

CSS

  1. .sk-folding-cube {
  2. margin: 20px auto;
  3. width: 40px;
  4. height: 40px;
  5. position: relative;
  6. -webkit-transform: rotateZ(45deg);
  7. transform: rotateZ(45deg);
  8. }
  9.  
  10. .sk-folding-cube .sk-cube {
  11. float: left;
  12. width: 50%;
  13. height: 50%;
  14. position: relative;
  15. -webkit-transform: scale(1.1);
  16. -ms-transform: scale(1.1);
  17. transform: scale(1.1);
  18. }
  19. .sk-folding-cube .sk-cube:before {
  20. content: '';
  21. position: absolute;
  22. top: 0;
  23. left: 0;
  24. width: 100%;
  25. height: 100%;
  26. background-color: #333;
  27. -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  28. animation: sk-foldCubeAngle 2.4s infinite linear both;
  29. -webkit-transform-origin: 100% 100%;
  30. -ms-transform-origin: 100% 100%;
  31. transform-origin: 100% 100%;
  32. }
  33. .sk-folding-cube .sk-cube2 {
  34. -webkit-transform: scale(1.1) rotateZ(90deg);
  35. transform: scale(1.1) rotateZ(90deg);
  36. }
  37. .sk-folding-cube .sk-cube3 {
  38. -webkit-transform: scale(1.1) rotateZ(180deg);
  39. transform: scale(1.1) rotateZ(180deg);
  40. }
  41. .sk-folding-cube .sk-cube4 {
  42. -webkit-transform: scale(1.1) rotateZ(270deg);
  43. transform: scale(1.1) rotateZ(270deg);
  44. }
  45. .sk-folding-cube .sk-cube2:before {
  46. -webkit-animation-delay: 0.3s;
  47. animation-delay: 0.3s;
  48. }
  49. .sk-folding-cube .sk-cube3:before {
  50. -webkit-animation-delay: 0.6s;
  51. animation-delay: 0.6s;
  52. }
  53. .sk-folding-cube .sk-cube4:before {
  54. -webkit-animation-delay: 0.9s;
  55. animation-delay: 0.9s;
  56. }
  57. @-webkit-keyframes sk-foldCubeAngle {
  58. 0%, 10% {
  59. -webkit-transform: perspective(140px) rotateX(-180deg);
  60. transform: perspective(140px) rotateX(-180deg);
  61. opacity: 0;
  62. } 25%, 75% {
  63. -webkit-transform: perspective(140px) rotateX(0deg);
  64. transform: perspective(140px) rotateX(0deg);
  65. opacity: 1;
  66. } 90%, 100% {
  67. -webkit-transform: perspective(140px) rotateY(180deg);
  68. transform: perspective(140px) rotateY(180deg);
  69. opacity: 0;
  70. }
  71. }
  72.  
  73. @keyframes sk-foldCubeAngle {
  74. 0%, 10% {
  75. -webkit-transform: perspective(140px) rotateX(-180deg);
  76. transform: perspective(140px) rotateX(-180deg);
  77. opacity: 0;
  78. } 25%, 75% {
  79. -webkit-transform: perspective(140px) rotateX(0deg);
  80. transform: perspective(140px) rotateX(0deg);
  81. opacity: 1;
  82. } 90%, 100% {
  83. -webkit-transform: perspective(140px) rotateY(180deg);
  84. transform: perspective(140px) rotateY(180deg);
  85. opacity: 0;
  86. }
  87. }

解析:四个等边方块形成一个正方形,整个旋转45度,然后每个方块通过不同的延迟时间,沿X轴做翻转动画。设置perspective是为了有3D的效果。

结论:以上的这些案例原理都是通过不同的延迟时间,给元素或子元素设置包括X、Y和Z轴上的移动旋转,以及缩放来达到动画的效果。有了这些参考,加上创意还能做出更多的类型加载效果。

到此这篇关于CSS 实现各种 Loading 效果附带解析过程的文章就介绍到这了,更多相关CSS 实现各种 Loading 效果内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号