效果一：

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      .loading{
         width: 80px;
         height: 40px;
         margin: 0 auto;
         margin-top:100px;
      }
      .loading span{
         display: inline-block;
         width: 8px;
         height: 100%;
         border-radius: 4px;
         background: lightgreen;
         -webkit-animation: load 1s ease infinite;
      }
      @-webkit-keyframes load{
         0%,100%{
            height: 40px;
            background: lightgreen;
         }
         50%{
            height: 70px;
            margin: -15px 0;
            background: lightblue;
         }
      }
      .loading span:nth-child(2){
         -webkit-animation-delay:0.2s;
      }
      .loading span:nth-child(3){
         -webkit-animation-delay:0.4s;
      }
      .loading span:nth-child(4){
         -webkit-animation-delay:0.6s;
      }
      .loading span:nth-child(5){
         -webkit-animation-delay:0.8s;
      }
   </style>
</head>
<body>
<div class="loading">
   
   
   
   
   
</div>
</body>
</html>

效果二：

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      .loadEffect{
         width: 100px;
         height: 100px;
         position: relative;
         margin: 0 auto;
         margin-top:100px;
      }
      .loadEffect span{
         display: inline-block;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: lightgreen;
         position: absolute;
         -webkit-animation: load 1.04s ease infinite;
      }
      @-webkit-keyframes load{
         0%{
            -webkit-transform: scale(1.2);
            opacity: 1;
         }
         100%{
            -webkit-transform: scale(.3);
            opacity: 0.5;
         }
      }
      .loadEffect span:nth-child(1){
         left: 0;
         top: 50%;
         margin-top:-10px;
         -webkit-animation-delay:0.13s;
      }
      .loadEffect span:nth-child(2){
         left: 14px;
         top: 14px;
         -webkit-animation-delay:0.26s;
      }
      .loadEffect span:nth-child(3){
         left: 50%;
         top: 0;
         margin-left: -10px;
         -webkit-animation-delay:0.39s;
      }
      .loadEffect span:nth-child(4){
         top: 14px;
         right:14px;
         -webkit-animation-delay:0.52s;
      }
      .loadEffect span:nth-child(5){
         right: 0;
         top: 50%;
         margin-top:-10px;
         -webkit-animation-delay:0.65s;
      }
      .loadEffect span:nth-child(6){
         right: 14px;
         bottom:14px;
         -webkit-animation-delay:0.78s;
      }
      .loadEffect span:nth-child(7){
         bottom: 0;
         left: 50%;
         margin-left: -10px;
         -webkit-animation-delay:0.91s;
      }
      .loadEffect span:nth-child(8){
         bottom: 14px;
         left: 14px;
         -webkit-animation-delay:1.04s;
      }
   </style>
</head>
<body>
<div class="loadEffect">
   
   
   
   
   
   
   
   
</div>
</body>
</html>

转载于:https://www.cnblogs.com/janas-luo/p/9605544.html

原文地址：https://blog.csdn.net/weixin_34320159/article/details/94490937?ops_request_misc=&request_id=a05761a87d824a90b16140c604312fda&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-14-94490937-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88