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>
相關文章
相關標籤/搜索