vue首屏加载动画

最新推荐文章于 2024-08-16 08:42:51 发布

wx479

最新推荐文章于 2024-08-16 08:42:51 发布

阅读量412

点赞数

文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/wx479/article/details/128786059

版权

样式style

<style>
      .first-loading-wrp {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 90vh;
        min-height: 90vh;
      }

      .first-loading-wrp > h1 {
        font-size: 30px;
        font-weight: bolder;
      }

      @keyframes loading__scale-to-up{
        from {
          transform: scale(1, 0.2);
        }
        to {
          transform: scale(1, 1);
        }
      }

      .first-loading-wrp .loading-wrp i{
        background-color: #409eff;
        display: inline-block;
        width: 5px;
        height: 50px;
        border-radius: 5px;
      }
      .splash__item + .splash__item {
        margin-left: 10px;
      }

      .first-loading-wrp .loading-wrp .splash__item {
        animation: loading__scale-to-up 0.5s linear infinite alternate-reverse;
        animation-delay: calc(var(--i) + 0s);
      }
    </style>

html代码

<div class="first-loading-wrp">
        <div class="loading-wrp">
            <i class="splash__item" style="--i: .1s"></i>
            <i class="splash__item" style="--i: .2s"></i>
            <i class="splash__item" style="--i: .3s"></i>
            <i class="splash__item" style="--i: .4s"></i>
            <i class="splash__item" style="--i: .5s"></i>
            <i class="splash__item" style="--i: .6s"></i>
            <i class="splash__item" style="--i: .7s"></i>
            <i class="splash__item" style="--i: .8s"></i>
        </div>
        <h1>加载中...</h1>
      </div>