纯css实现loading加载中（多种展现形式）

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

前言

现如今网页越来越趋近于动画相信大家平时浏览网页或多或少都能看到一些动画效果今天我们来做一个有意思的动画效果纯 css 实现 loading 加载中多种展现形式下面一起看看吧。

1. 常规 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="loadBox">
      <div class="loaderContantBox"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .loadBox .loaderContantBox {
    color: white;
    font-size: 40px;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: translateZ(0);
    /* animation规定完成动画所花费的时间该属性必须规定否则动画时长为0无法播放 */
    animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
  }

  @keyframes loadBox {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
        -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
        -0.297em -0.775em 0 -0.477em;
    }

    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
        -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
        -0.749em -0.34em 0 -0.477em;
    }

    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
        -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
        -0.82em -0.09em 0 -0.477em;
    }

    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }

  @keyframes round {
    0% {
      transform: rotate(0deg); /* 开始旋转 div 元素 */
    }

    100% {
      transform: rotate(360deg); /* 结束旋转 div 元素 */
    }
  }
}
</style>

2. 抛出线条式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <svg class="scalableBox" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="hsl(223,90%,55%)" />
          <stop offset="100%" stop-color="hsl(253,90%,55%)" />
        </linearGradient>
        <linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="hsl(193,90%,55%)" />
          <stop offset="50%" stop-color="hsl(223,90%,55%)" />
          <stop offset="100%" stop-color="hsl(253,90%,55%)" />
        </linearGradient>
      </defs>
      <circle class="apringBox" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16" stroke-linecap="round" />
      <circle class="apwormOneBox" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16" stroke-linecap="round"
        stroke-dasharray="87.96 263.89" />
      <path class="apwormTwoBox" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none" stroke="url(#ap-grad2)"
        stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494" />
    </svg>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .scalableBox {
    width: 40px;
    height: 70px;
  }
  .apringBox {
    transition: stroke 0.3s;
  }

  .apwormOneBox,
  .apwormTwoBox {
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }
  .apwormTwoBox {
    animation-name: worm2;
    visibility: hidden;
  }
  .apwormOneBox {
    animation-name: worm1;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 10%, 10%);
    --fg: hsl(var(--hue), 10%, 90%);
  }

  .apringBox {
    stroke: hsla(var(--hue), 10%, 90%, 0.9);
  }
}

@keyframes worm1 {
  from {
    animation-timing-function: ease-in-out;
    stroke-dashoffset: -87.96;
  }

  20% {
    animation-timing-function: ease-in;
    stroke-dashoffset: 0;
  }

  60% {
    stroke-dashoffset: -791.68;
    visibility: visible;
  }

  60.1%,
  to {
    stroke-dashoffset: -791.68;
    visibility: hidden;
  }
}

@keyframes worm2 {
  from,
  60% {
    stroke-dashoffset: -87.96;
    visibility: hidden;
  }

  60.1% {
    animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
    stroke-dashoffset: -87.96;
    visibility: visible;
  }

  77% {
    animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
    stroke-dashoffset: -340;
    visibility: visible;
  }

  to {
    stroke-dashoffset: -669.92;
    visibility: visible;
  }
}
</style>

3. 进度条颜色覆盖式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 120px;
    height: 20px;
    background: linear-gradient(rgb(12, 132, 223) 0 0) 0/0% no-repeat #ddd;
    animation: cartoon 2s infinite linear;
  }

  @keyframes cartoon {
    100% {
      background-size: 100%;
    }
  }
}
</style>

4. 椭圆式进度条 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 120px;
    height: 22px;
    border-radius: 20px;
    color: #514b82;
    border: 2px solid;
    position: relative;
  }
  .contantBox::before {
    content: "";
    position: absolute;
    margin: 2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: #514b82;
    animation: cartoon 2s infinite;
  }

  @keyframes cartoon {
    100% {
      inset: 0;
    }
  }
}
</style>

5. 卡顿式进度条 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
    animation: cartoon 2s infinite steps(10);
  }

  @keyframes cartoon {
    100% {
      background-size: 110%;
    }
  }
}
</style>

6. 进度条波纹 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background: repeating-linear-gradient(
          135deg,
          #f03355 0 10px,
          #ffa516 0 20px
        )
        0/0% no-repeat,
      repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
    animation: cartoon 2s infinite;
  }

  @keyframes cartoon {
    100% {
      background-size: 100%;
    }
  }
}
</style>

7. 进度条分隔式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 120px;
    height: 20px;
    -webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
    background: linear-gradient(rgb(73, 255, 57) 0 0) 0/0% no-repeat #ddd;
    animation: cartoon 2s infinite steps(6);
  }

  @keyframes cartoon {
    100% {
      background-size: 120%;
    }
  }
}
</style>

8. 圆球连接式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 120px;
    height: 24px;
    -webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25%
        100%,
      linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px)
        no-repeat;
    background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;
    animation: cartoon 2s infinite linear;
  }

  @keyframes cartoon {
    100% {
      background-size: 100%;
    }
  }
}
</style>

9. 电池充电式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 80px;
    height: 40px;
    border: 2px solid rgb(103, 194, 58);
    padding: 3px;
    background: repeating-linear-gradient(
        90deg,
        rgb(103, 194, 58) 0 10px,
        #0000 0 16px
      )
      0/0% no-repeat content-box content-box;
    position: relative;
    animation: cartoon 2s infinite steps(6);
  }
  .contantBox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border: 2px solid rgb(103, 194, 58);
  }

  @keyframes cartoon {
    100% {
      background-size: 120%;
    }
  }
}
</style>

10. 球体分隔式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
    background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;
    animation: cartoon 2s infinite steps(7);
  }

  @keyframes cartoon {
    100% {
      background-size: 100% 115%;
    }
  }
}
</style>

11. 水球波纹式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    --r1: 154%;
    --r2: 68.5%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(
          var(--r1) var(--r2) at top,
          #0000 79.5%,
          #269af2 80%
        )
        center left,
      radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%)
        center center,
      radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%)
        center right,
      #ccc;
    background-size: 50.5% 220%;
    background-position: -100% 0%, 0% 0%, 100% 0%;
    background-repeat: no-repeat;
    animation: cartoon 2s infinite linear;
  }
  @keyframes cartoon {
    33% {
      background-position: 0% 33%, 100% 33%, 200% 33%;
    }

    66% {
      background-position: -100% 66%, 0% 66%, 100% 66%;
    }

    100% {
      background-position: 0% 100%, 100% 100%, 200% 100%;
    }
  }
}
</style>

12. 半圆线条式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="contantBox"></div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .contantBox {
    width: 120px;
    height: 60px;
    border-radius: 200px 200px 0 0;
    -webkit-mask: repeating-radial-gradient(
      farthest-side at bottom,
      #0000 0,
      #000 1px 12%,
      #0000 calc(12% + 1px) 20%
    );
    background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0)
      bottom/0% 0% no-repeat #ddd;
    animation: cartoon 2s infinite steps(6);
  }
  @keyframes cartoon {
    100% {
      background-size: 120% 120%;
    }
  }
}
</style>

13. 球体内小球跳跃式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <!-- 第一种 -->
    <div>
      <figure>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
      </figure>
    </div>
    <!-- 第二种 -->
    <div>
      <figure>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
      </figure>
    </div>
    <!-- 第三种 -->
    <div>
      <figure>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
      </figure>
    </div>
    <!-- 第四种 -->
    <div>
      <figure>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
        <section>
          <div></div>
        </section>
      </figure>
    </div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  display: flex;
  @keyframes move {
    from {
      transform: translate(0, 50%);
    }

    to {
      transform: translate(0, 850%);
    }
  }
  figure {
    margin: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    background: rgb(240,109,78);
  }

  section {
    width: 10%;
    height: 100%;
    position: absolute;
    left: 45%;
  }

  section:nth-child(2) {
    transform: rotate(22.5deg);
  }

  section:nth-child(3) {
    transform: rotate(45deg);
  }

  section:nth-child(4) {
    transform: rotate(67.5deg);
  }

  section:nth-child(5) {
    transform: rotate(90deg);
  }

  section:nth-child(6) {
    transform: rotate(112.5deg);
  }

  section:nth-child(7) {
    transform: rotate(135deg);
  }

  section:nth-child(8) {
    transform: rotate(157.5deg);
  }

  figure div {
    height: 10%;
    border-radius: 50%;
    background: #fff;
    animation: move 1s ease-in-out infinite alternate;
  }

  figure:nth-child(1) > section:nth-child(1) > div {
    animation-delay: -0.1875s;
  }

  figure:nth-child(1) > section:nth-child(2) > div {
    animation-delay: -0.175s;
  }

  figure:nth-child(1) > section:nth-child(3) > div {
    animation-delay: -0.1625s;
  }

  figure:nth-child(1) > section:nth-child(4) > div {
    animation-delay: -0.15s;
  }

  figure:nth-child(1) > section:nth-child(5) > div {
    animation-delay: -0.9375s;
  }

  figure:nth-child(1) > section:nth-child(6) > div {
    animation-delay: -0.925s;
  }

  figure:nth-child(1) > section:nth-child(7) > div {
    animation-delay: -0.9125s;
  }

  figure:nth-child(1) > section:nth-child(8) > div {
    animation-delay: -0.9s;
  }

  figure:nth-child(2) > section:nth-child(1) > div {
    animation-delay: -0.875s;
  }

  figure:nth-child(2) > section:nth-child(2) > div {
    animation-delay: -0.75s;
  }

  figure:nth-child(2) > section:nth-child(3) > div {
    animation-delay: -0.625s;
  }

  figure:nth-child(2) > section:nth-child(4) > div {
    animation-delay: -0.5s;
  }

  figure:nth-child(2) > section:nth-child(5) > div {
    animation-delay: -0.375s;
  }

  figure:nth-child(2) > section:nth-child(6) > div {
    animation-delay: -0.25s;
  }

  figure:nth-child(2) > section:nth-child(7) > div {
    animation-delay: -0.125s;
  }

  figure:nth-child(3) > section:nth-child(1) > div {
    animation-delay: -0.5s;
  }

  figure:nth-child(3) > section:nth-child(3) > div {
    animation-delay: -0.5s;
  }

  figure:nth-child(3) > section:nth-child(5) > div {
    animation-delay: -0.5s;
  }

  figure:nth-child(3) > section:nth-child(7) > div {
    animation-delay: -0.5s;
  }

  figure:nth-child(4) > section:nth-child(1) > div {
    animation-delay: -0.35s;
  }

  figure:nth-child(4) > section:nth-child(2) > div {
    animation-delay: -0.3s;
  }

  figure:nth-child(4) > section:nth-child(3) > div {
    animation-delay: -0.25s;
  }

  figure:nth-child(4) > section:nth-child(4) > div {
    animation-delay: -0.2s;
  }

  figure:nth-child(4) > section:nth-child(5) > div {
    animation-delay: -0.15s;
  }

  figure:nth-child(4) > section:nth-child(6) > div {
    animation-delay: -0.1s;
  }

  figure:nth-child(4) > section:nth-child(7) > div {
    animation-delay: -0.05s;
  }
}
</style>

14. 球体内动图式 loading

实现效果

在这里插入图片描述

代码如下

<template>
  <div class="parentBox">
    <div class="containerBox">
      <!-- 第一种 -->
      <div class="canvasBox">
        <div class="spinnerOneBox spinnerMaxBox">
          <div class="spinnerOneBox spinnerMidBox">
            <div class="spinnerOneBox spinnerMinBox"></div>
          </div>
        </div>
      </div>
      <!-- 第二种 -->
      <div class="canvasBox canvasTwoBox">
        <div class="spinnerTwoBox"></div>
        <div class="hourHandBox"></div>
        <div class="dotBox"></div>
      </div>
      <!-- 第三种 -->
      <div class="canvasBox">
        <div class="spinnerThreeBox"></div>
      </div>
      <!-- 第四种 -->
      <div class="canvasBox">
        <div class="spinnerFourBox"></div>
      </div>
      <!-- 第五种 -->
      <div class="canvasBox">
        <div class="spinnerFiveBox"></div>
      </div>
      <!-- 第六种 -->
      <div class="canvasBox">
        <div class="spinnerSexBox p1"></div>
        <div class="spinnerSexBox p2"></div>
        <div class="spinnerSexBox p3"></div>
        <div class="spinnerSexBox p4"></div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  .containerBox {
    display: flex;
    .canvasBox {
      align-items: center;
      background: #eeeeee;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      margin: 1em;
      width: 10em;
      height: 10em;
      // 第一种
      .spinnerOneBox {
        align-items: center;
        border: 0.3em solid transparent;
        border-top: 0.3em solid #4db6ac;
        border-right: 0.3em solid #4db6ac;
        border-radius: 100%;
        display: flex;
        justify-content: center;
      }
      .spinnerMaxBox {
        animation: spinnerOne 3s linear infinite;
        height: 3em;
        width: 3em;
        .spinnerMidBox {
          animation: spinnerOne 5s linear infinite;
          height: 2.4em;
          width: 2.4em;
          .spinnerMinBox {
            animation: spinnerOne 5s linear infinite;
            height: 1.8em;
            width: 1.8em;
          }
        }
      }
    }
    @keyframes spinnerOne {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    // 第二种
    .canvasTwoBox {
      position: relative;
      .spinnerTwoBox {
        animation: spinnerTwo 1s linear infinite;
        background: #4db6ac;
        border-radius: 100px;
        height: 3em;
        transform-origin: top;
        position: absolute;
        top: 50%;
        width: 0.22em;
      }
      .hourHandBox {
        animation: spinnerTwo 7s linear infinite;
        background: #4db6ac;
        border-radius: 100px;
        height: 2em;
        transform-origin: top;
        position: absolute;
        top: 50%;
        width: 0.2em;
      }
      .dotBox {
        background: #4db6ac;
        border-radius: 100%;
        height: 0.5em;
        width: 0.5em;
      }
    }
    @keyframes spinnerTwo {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    // 第三种
    .spinnerThreeBox {
      animation: spinnerThree 1s linear infinite;
      background: #4db6ac;
      border-radius: 100%;
      width: 3em;
      height: 3em;
    }

    @keyframes spinnerThree {
      0%,
      35% {
        background: #4db6ac;
        transform: scale(1);
      }
      20%,
      50% {
        background: #80cbc4;
        transform: scale(1.3);
      }
    }
    // 第四种
    .spinnerFourBox {
      animation: spinnerFour 1s linear infinite;
      border: solid 7px transparent;
      border-top: solid 7px #4db6ac;
      border-radius: 100%;
      width: 3em;
      height: 3em;
    }

    @keyframes spinnerFour {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    // 第五种
    .spinnerFiveBox {
      animation: spinnerFive 1s linear infinite;
      border: solid 1.5em #4db6ac;
      border-right: solid 1.5em transparent;
      border-left: solid 1.5em transparent;
      border-radius: 100%;
      width: 0;
      height: 0;
    }

    @keyframes spinnerFive {
      0% {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(60deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    // 第六种
    .spinnerSexBox {
      background: #4db6ac;
      border-radius: 50%;
      height: 1em;
      margin: 0.1em;
      width: 1em;
    }

    .p1 {
      animation: fall 1s linear 0.3s infinite;
    }

    .p2 {
      animation: fall 1s linear 0.2s infinite;
    }

    .p3 {
      animation: fall 1s linear 0.1s infinite;
    }

    .p4 {
      animation: fall 1s linear infinite;
    }
    @keyframes fall {
      0% {
        transform: translateY(-15px);
      }
      25%,
      75% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-15px);
      }
    }
  }
}
</style>

持续更新中...

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS
返回列表

上一篇：Spring MVC（概念+项目创建+@RequestMappring）

下一篇：【MYSQL初级篇】入门学习【增删改查-库表数据】

“纯css实现loading加载中（多种展现形式）” 的相关文章

关于css、scss、sass、html单页面应用scss1年前 (2023-02-02)
黑马程序员前端-CSS用户界面样式源码_易语言ui界面源码1年前 (2023-02-02)
CSS 布局 - 水平 & 垂直对齐1年前 (2023-02-02)
CSS设置元素字体、降级使用字体、引入外部字体1年前 (2023-02-02)
CSS 使用 @font-face 引入外部字体1年前 (2023-02-02)
CSS+JS 置顶效果1年前 (2023-02-02)
【前端面试 | css面试题整理】1年前 (2023-02-02)
CSS背景：背景色/背景图像/背景重复/背景附着/简写背景属性（一文搞懂）1年前 (2023-02-02)
[前端笔记——CSS] 10.层叠与继承、选择器1年前 (2023-02-02)
HTML+CSS+JS制作炫酷【烟花特效】1年前 (2023-02-02)

阿里云国际版