前言

现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，纯 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>

持续更新中...