loading动画

一时失言乱红尘 2022-10-13 15:52 182阅读 0赞

## 等待loading动画 ##

.blinking { 
      width: 80px;
      height: 80px;
      background: transparent;
      border-radius: 5px;
      position: relative;
      padding: 8px;
      margin: 0 auto;
    }
    
    .blinking li { 
      width: 20px;
      height: 8px;
      display: inline-block;
      border-radius: 20px;
      background: #00ade5;
      position: absolute;
      left: 50%;
      top: 50%;
      animation: 1s blink infinite;
      transform-origin: left top;
    }
    
    @keyframes blink { 
      0% { 
        opacity: 0.4;
      }
      30% { 
        opacity: 0.6;
      }
      60% { 
        opacity: 0.8;
      }
      100% { 
        opacity: 1;
      }
    }
    
    .blinking li:first-child { 
      transform: rotate(45deg) translateX(0.3rem);
      animation-delay: 0.125s;
    }
    
    .blinking li:nth-child(2) { 
      transform: rotate(90deg) translateX(0.3rem);
      animation-delay: 0.25s;
    }
    
    .blinking li:nth-child(3) { 
      transform: rotate(135deg) translateX(0.3rem);
      animation-delay: 0.375s;
    }
    
    .blinking li:nth-child(4) { 
      transform: rotate(180deg) translateX(0.3rem);
      animation-delay: 0.5s;
    }
    
    .blinking li:nth-child(5) { 
      transform: rotate(225deg) translateX(0.3rem);
      animation-delay: 0.625s;
    }
    
    .blinking li:nth-child(6) { 
      transform: rotate(270deg) translateX(0.3rem);
      animation-delay: 0.75s;
    }
    
    .blinking li:nth-child(7) { 
      transform: rotate(315deg) translateX(0.3rem);
      animation-delay: 0.875s;
    }
    
    .blinking li:nth-child(8) { 
      transform: rotate(360deg) translateX(0.3rem);
      animation-delay: 0s;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221005/9d3784dc3173419fbd6fd9b3531e3d8d.png