html, css写一个loading

最新推荐文章于 2023-12-22 10:06:15 发布

汉武大帝·

最新推荐文章于 2023-12-22 10:06:15 发布

阅读量237

点赞数

分类专栏：杂七杂八文章标签： css html css3

本文链接：https://blog.csdn.net/yinge0508/article/details/126545158

版权

杂七杂八专栏收录该内容

33 篇文章 4 订阅

订阅专栏

效果图：

<template>
  <div>
    <div class="loading3">
      <div class="loader">
        <span v-for="i in 13"></span>
      </div>
    </div>
  </div>
</template>
<script>
 
</script>
<style lang="less" scoped> 
.loading3 {
  width: 100%;
  height: 500px;
  background: linear-gradient(#000 70%, pink);
  .loader {
    width: 15rem;
    height: 15rem;
    border: 8px solid rgb(21, 93, 228);
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: pink;
    span {
      width: 5px;
      height: 50px;
      background: rgb(21, 93, 228);
      margin: 0 2px;
      animation: span-animation 1.5s ease-in-out infinite;
      animation-delay: calc(var(--n) * 0.05s);
    }
  }
}
// 关键帧
@keyframes span-animation{
  0%, 100% {
    transform:scaleY(0.05) translateX(-0.5em);
  }
  40%{
    transform:scaleY(2) translatex(1em);
  }
}
.loading3 .loader span:nth-of-type(1){ --n: 1; }
.loading3 .loader span:nth-of-type(2){ --n: 2;}
.loading3 .loader span:nth-of-type(3){ --n: 3;}
.loading3 .loader span:nth-of-type(4){ --n: 4;}
.loading3 .loader span:nth-of-type(5){ --n: 5;}
.loading3 .loader span:nth-of-type(6){ --n: 6;}
.loading3 .loader span:nth-of-type(7){ --n: 7;}
.loading3 .loader span:nth-of-type(8){ --n: 8;}
.loading3 .loader span:nth-of-type(9){ --n: 9;}
.loading3 .loader span:nth-of-type(10){ --n: 10;}
.loading3 .loader span:nth-of-type(11){ --n: 11;}
.loading3 .loader span:nth-of-type(12){ --n: 12;}
.loading3 .loader span:nth-of-type(13){ --n: 13;}

.title {
  text-align: left;
}
</style>