CSS实现Loading加载中动画

过度动画：

　　前端开发过程中，有时需要自定义Loading做加载动画，该动画是类似windows系统关机的动画，这个是在vue工程中自定义的一个Loading组件，vue的代码和htm的差别不大，自己调整一下成html文档格式就好了，虽然vue也自带了loading组件，但感觉不好用，尤其是我们需要把loading动画加在某个DOM的时候，所有自定义一个，需要的时候搬运就好了

---

<template>
    <div class="container">
        <div class="rotate">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
      <p>跳转中,请稍等...</p>
    </div>
</template>

<script>
export default {
  name: 'loading',
  data() {
    return {

    }
  }
}
</script>

<style scoped="scoped" lang="less">
  .container{
      position: relative;
      width: 24.0625rem;
      height: 5500px;
      background-color: rgba(229, 229, 229, 0.5);
      opacity: 1;
      z-index: 999;

    p{
      width: 300px;
      height: 150px;
      color: royalblue;
      margin: 0 auto;
      text-align:center;
      font-size: 40px;
      font-weight: bold;
      position: absolute;
      top: 700px;
      left: 440px;

    }
  }
  .rotate{
      position: absolute;
      width: 150px;
      height: 150px;
      left: 500px;
    top: 500px;
  }
  .item{
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      animation: xuanzhuan 4s linear infinite;
  }
  .item:nth-child(1){
      animation-delay: 0.15s;
  }
  .item:nth-child(2){
      animation-delay: 0.3s;
  }
  .item:nth-child(3){
      animation-delay: 0.45s;
  }
  .item:nth-child(4){
      animation-delay: 0.6s;
  }
  .item:nth-child(5){
      animation-delay: 0.75s;
  }
  .item::after{
      content:'';
      display: block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: royalblue;
  }
  @keyframes xuanzhuan{
      75%{
          transform: rotate(650deg);
      }
      79%{
          transform: rotate(720deg);
          opacity: 1;
      }
      80%{
          transform: rotate(720deg);
          opacity: 0;
      }
      100%{
          transform: rotate(810deg);
          opacity: 0;
      }
  }
</style>

---

 

 

 

 

运行结果：