css跳动文字——加载中

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

首先是文字部分

<div class="loading">
      <div class="loading-icon">⌛️</div>
      <div class="loading-text">
        <span>正</span>
        <span>在</span>
        <span>载</span>
        <span>入</span>
        <span>...</span>
      </div>
    </div>

然后就是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; }中进行更改时间

最后是完整的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>逐一跳动的“加载中”</title>
    
    <style>
      /* 容器的样式 */
      .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;
      }
    </style>
  </head>
  <body>
    <div class="loading">
      <div class="loading-icon">⌛️</div>
      <div class="loading-text">
        <span>正</span>
        <span>在</span>
        <span>载</span>
        <span>入</span>
        <span>...</span>
      </div>
    </div>
  </body>
</html>

css跳动文字——加载中

猜你喜欢