vue开场动画2

    <!-- 加载中动画 -->
    <style>
      .app-loading-box {
        position: fixed;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100vw;
        height: 100vh;
        top: 0;
      }

      .app-loading {
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        border-radius: 50%;
        border-top: 10px solid #63A69F;
        /* 相对定位 */
        /* position: relative; */
        /* 执行动画：动画a1 时长 线性的 无限次播放 */
        animation: a1 2s linear infinite;
      }

      .app-loading::before,
      .app-loading::after {
        content: "";
        width: 200px;
        height: 200px;
        /* 绝对定位 */
        position: absolute;
        left: 0;
        top: -10px;
        box-sizing: border-box;
        border-radius: 50%;
      }

      .app-loading::before {
        border-top: 10px solid #F2E1AC;
        /* 旋转120度 */
        transform: rotate(120deg);
      }

      .app-loading::after {
        border-top: 10px solid #F2836B;
        /* 旋转240度 */
        transform: rotate(240deg);
      }

      .app-loading span {
        /* 绝对定位 */
        position: absolute;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #999;
        /* 执行动画：动画a2 时长 线性的 无限次播放 */
        animation: a2 2s linear infinite;
      }

      /* 定义动画 */
      @keyframes a1 {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes a2 {
        to {
          transform: rotate(-360deg);
        }
      }
    </style>
    <div class="app-loading-box">
      <div class="app-loading">
        <span>拼命加载中…</span>
      </div>
    </div>