css跳动文字——加载中

在写一些前端页面时需要一段时间的请求，这段时间为了不那么单调就会加上一些过度效果；例如——加载中；进度条之类的；今天写一个css跳动样式——加载中希望对你有所帮助

首先是文字部分

      
⌛️
      

        正
        在
        载
        入
        ...
      
    

然后就是css部分了；主要就是运用css动画效果进行跳动的

 /* 容器的样式 */
      .loading {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        width: 200px;
        border: 5px solid gray;
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
        font-size: 24px;
        color: gray;
      }
      
      /* 跳动动画 */
      @keyframes loading {
        0% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0); }
      }
      
      /* 加载中文字的样式 */
      .loading-text {
        margin-left: 10px;
        position: relative;  /* 父元素需设置 position 属性才能让子元素正常定位 */
      }
      
      /* 逐一跳动的文字的样式 */
      .loading-text span {
        display: inline-block;
        animation: loading 1s ease-in-out infinite;
      }
      
      /* 将逐一跳动的文字放在相同位置 */
      .loading-text span:nth-child(2) {
        animation-delay: 0.1s;
      }
      
      .loading-text span:nth-child(3) {
        animation-delay: 0.2s;
      }
.loading-text span:nth-child(4) {
        animation-delay: 0.3s;
      }

上述中如需更改跳动间隔可以再 .loading-text span:nth-child(3) { animation-delay: 0.2s; }中进行更改时间

最后是完整的代码

  
    
    
    
    
  
  
    

      
⌛️
      

        正
        在
        载
        入
        ...