经验首页 前端设计 程序设计 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.   
  19.   -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  20.   animation: sk-bounce 2.0s infinite ease-in-out;
  21. }
  22.  
  23. .double-bounce2 {
  24.   -webkit-animation-delay: -1.0s;
  25.   animation-delay: -1.0s;
  26. }
  27.  
  28. @-webkit-keyframes sk-bounce {
  29.   0%, 100% { -webkit-transform: scale(0.0) }
  30.   50% { -webkit-transform: scale(1.0) }
  31. }
  32.  
  33. @keyframes sk-bounce {
  34.   0%, 100% { 
  35.     transform: scale(0.0);
  36.     -webkit-transform: scale(0.0);
  37.   } 50% { 
  38.     transform: scale(1.0);
  39.     -webkit-transform: scale(1.0);
  40.   }
  41. }

解析：两个子元素 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.   
  15.   -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  16.   animation: sk-stretchdelay 1.2s infinite ease-in-out;
  17. }
  18.  
  19. .spinner .rect2 {
  20.   -webkit-animation-delay: -1.1s;
  21.   animation-delay: -1.1s;
  22. }
  23.  
  24. .spinner .rect3 {
  25.   -webkit-animation-delay: -1.0s;
  26.   animation-delay: -1.0s;
  27. }
  28.  
  29. .spinner .rect4 {
  30.   -webkit-animation-delay: -0.9s;
  31.   animation-delay: -0.9s;
  32. }
  33.  
  34. .spinner .rect5 {
  35.   -webkit-animation-delay: -0.8s;
  36.   animation-delay: -0.8s;
  37. }
  38.  
  39. @-webkit-keyframes sk-stretchdelay {
  40.   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  41.   20% { -webkit-transform: scaleY(1.0) }
  42. }
  43.  
  44. @keyframes sk-stretchdelay {
  45.   0%, 40%, 100% { 
  46.     transform: scaleY(0.4);
  47.     -webkit-transform: scaleY(0.4);
  48.   }  20% { 
  49.     transform: scaleY(1.0);
  50.     -webkit-transform: scaleY(1.0);
  51.   }
  52. }

解析：在类名为 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.   
  9.   -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  10.   animation: sk-cubemove 1.8s infinite ease-in-out;
  11. }
  12.  
  13. .cube2 {
  14.   -webkit-animation-delay: -0.9s;
  15.   animation-delay: -0.9s;
  16. }
  17.  
  18. @-webkit-keyframes sk-cubemove {
  19.   25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  20.   50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  21.   75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  22.   100% { -webkit-transform: rotate(-360deg) }
  23. }
  24.  
  25. @keyframes sk-cubemove {
  26.   25% { 
  27.     transform: translateX(42px) rotate(-90deg) scale(0.5);
  28.     -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  29.   } 50% { 
  30.     transform: translateX(42px) translateY(42px) rotate(-179deg);
  31.     -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  32.   } 50.1% { 
  33.     transform: translateX(42px) translateY(42px) rotate(-180deg);
  34.     -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  35.   } 75% { 
  36.     transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  37.     -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  38.   } 100% { 
  39.     transform: rotate(-360deg);
  40.     -webkit-transform: rotate(-360deg);
  41.   }
  42. }

解析：两个子元素实现白色的方块，添加动画属性，在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.   
  8.   -webkit-animation: sk-rotate 2.0s infinite linear;
  9.   animation: sk-rotate 2.0s infinite linear;
  10. }
  11.  
  12. .dot1, .dot2 {
  13.   width: 60%;
  14.   height: 60%;
  15.   display: inline-block;
  16.   position: absolute;
  17.   top: 0;
  18.   background-color: #333;
  19.   border-radius: 100%;
  20.   
  21.   -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  22.   animation: sk-bounce 2.0s infinite ease-in-out;
  23. }
  24.  
  25. .dot2 {
  26.   top: auto;
  27.   bottom: 0;
  28.   -webkit-animation-delay: -1.0s;
  29.   animation-delay: -1.0s;
  30. }
  31.  
  32. @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
  33. @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
  34.  
  35. @-webkit-keyframes sk-bounce {
  36.   0%, 100% { -webkit-transform: scale(0.0) }
  37.   50% { -webkit-transform: scale(1.0) }
  38. }
  39.  
  40. @keyframes sk-bounce {
  41.   0%, 100% { 
  42.     transform: scale(0.0);
  43.     -webkit-transform: scale(0.0);
  44.   } 50% { 
  45.     transform: scale(1.0);
  46.     -webkit-transform: scale(1.0);
  47.   }
  48. }

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

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！

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

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站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号