小加载动画-CFANZ编程社区

在网上学了一个小加载动画，喜欢的话拿一个赞跟我换吧！纯 CSS 没有什么套路，来吧！展示：
小加载动画_html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载动画</title>
<style>body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .container {
      width: 8em;
      height: 1em;
      font-size: 35px;
      display: flex;
      justify-content: space-between;
  }

  .container span {
      width: 1em;
      height: 1em;
      --duration: 1.5s;
  }

  .girl {
      animation: slide var(--duration) ease-in-out infinite alternate;
  }

  @keyframes {
      from {
          transform: translateX(0);
          filter: brightness(1);
      }

      to {
          transform: translatex(calc(8em - (1em * 1.25)));
          filter: brightness(1.45);
      }
  }

  .boys {
      width: 6em;
      display: flex;
      justify-content: space-between;
  }

  .boys span {
      animation: var(--duration) ease-in-out infinite alternate;
  }

  .boys span:nth-child(1) {
      animation-name: jump-off-1;
  }

  .boys span:nth-child(2) {
      animation-name: jump-off-2;
  }

  .boys span:nth-child(3) {
      animation-name: jump-off-3;
  }

  .boys span:nth-child(4) {
      animation-name: jump-off-4;
  }

  @keyframes {
      0%, 15% {
          transform: rotate(0deg);
      }

      35%, 100% {
          transform-origin: -50% center;
          transform: rotate(-180deg);
      }
  }

  @keyframes {
      0%, 30% {
          transform: rotate(0deg);
      }

      50%, 100% {
          transform-origin: -50% center;
          transform: rotate(-180deg);
      }
  }

  @keyframes {
      0%, 45% {
          transform: rotate(0deg);
      }

      65%, 100% {
          transform-origin: -50% center;
          transform: rotate(-180deg);
      }
  }

  @keyframes {
      0%, 60% {
          transform: rotate(0deg);
      }

      80%, 100% {
          transform-origin: -50% center;
          transform: rotate(-180deg);
      }
  }

  .container span::before {    
      content: '';
      position: absolute;
      width: inherit;
      height: inherit;
      border-radius: 15%;
      box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3);
  }

  .girl::before {
      background-color: hotpink;
  }

  .boys span::before {
      background-color: dodgerblue;
      animation: var(--duration) ease-in-out infinite alternate;
  }

  .boys span:nth-child(1)::before {
      filter: brightness(1);
      animation-name: jump-down-1;
  }

  .boys span:nth-child(2)::before {
      filter: brightness(1.15);
      animation-name: jump-down-2;
  }

  .boys span:nth-child(3)::before {
      filter: brightness(1.3);
      animation-name: jump-down-3;
  }

  .boys span:nth-child(4)::before {
      filter: brightness(1.45);
      animation-name: jump-down-4;
  }

  @keyframes {
      5% {
          transform: scale(1, 1);
      }

      15% {
          transform-origin: center bottom;
          transform: scale(1.3, 0.7);
      }

      20%, 25% {
          transform-origin: center bottom;
          transform: scale(0.8, 1.4);
      }

      40% {
          transform-origin: center top;
          transform: scale(1.3, 0.7);
      }

      55%, 100% {
          transform: scale(1, 1);
      }
  }

  @keyframes {
      20% {
          transform: scale(1, 1);
      }

      30% {
          transform-origin: center bottom;
          transform: scale(1.3, 0.7);
      }

      35%, 40% {
          transform-origin: center bottom;
          transform: scale(0.8, 1.4);
      }

      55% {
          transform-origin: center top;
          transform: scale(1.3, 0.7);
      }

      70%, 100% {
          transform: scale(1, 1);
      }
  }

  @keyframes {
      35% {
          transform: scale(1, 1);
      }

      45% {
          transform-origin: center bottom;
          transform: scale(1.3, 0.7);
      }

      50%, 55% {
          transform-origin: center bottom;
          transform: scale(0.8, 1.4);
      }

      70% {
          transform-origin: center top;
          transform: scale(1.3, 0.7);
      }

      85%, 100% {
          transform: scale(1, 1);
      }
  }

  @keyframes {
      50% {
          transform: scale(1, 1);
      }

      60% {
          transform-origin: center bottom;
          transform: scale(1.3, 0.7);
      }

      65%, 70% {
          transform-origin: center bottom;
          transform: scale(0.8, 1.4);
      }

      85% {
          transform-origin: center top;
          transform: scale(1.3, 0.7);
      }

      100%, 100% {
          transform: scale(1, 1);
      }
  }</style>
</head>
<body>
  <div class="container">
    <span class="girl"></span>
    <div class="boys">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>
<script>
</script>
</html>