vue 3D小球 loading

<template>
  <div class="load">
    <div class="loadEffect">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script>
  export default{

  }
</script>

<style scoped>

  .loadEffect{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top:100px;
  }
  .loadEffect span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(270deg, #623Fe9 0%, #5ddaf4 100%);
    border-radius: 50%;
    position: absolute;
    -webkit-animation: load 1.04s linear infinite;
    animation: load 1.04s linear infinite;
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    opacity: 0.1;
  }
  @keyframes load{
    0%{
      transform: scale(1.2);
      -webkit-transform: scale(1.2);
      opacity: 1;
    }
    100%{
      transform: scale(0);
      -webkit-transform: scale(0);
      opacity: 0.5;
    }
  }
  @-webkit-keyframes load {
    0%{
      -webkit-transform: scale(1.2);
      opacity: 1;
    }
    100%{
      -webkit-transform: scale(0);
      opacity: 0.5;
    }
  }
  .loadEffect span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-10px;
    -webkit-animation-delay:0.13s;
    animation-delay:0.13s;
  }
  .loadEffect span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
    animation-delay:0.26s;
  }
  .loadEffect span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -10px;
    -webkit-animation-delay:0.39s;
    animation-delay:0.39s;
  }
  .loadEffect span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
    animation-delay:0.52s;
  }
  .loadEffect span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-10px;
    -webkit-animation-delay:0.65s;
    animation-delay:0.65s;
  }
  .loadEffect span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
    animation-delay:0.78s;
  }
  .loadEffect span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    -webkit-animation-delay:0.91s;
    animation-delay:0.91s;
  }
  .loadEffect span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
    animation-delay:1.04s;
  }

</style>