Implementierung des CSS-Ladeeffekts Pac-Man

  <div Klasse="Container">
    <div Klasse="wird geladen">
      <div Klasse="essen"></div>
      <div Klasse="laden"></div>
      <div Klasse="laden"></div>
      <div Klasse="laden"></div>
    </div>
  </div>

    Körper {
      Rand: 0;
      Polsterung: 0;
      Hintergrund: #fff;
    }
    .container {
      Position: absolut;
      oben: 50 %;
      links: 50%;
      transformieren: übersetzen(-50 %, -50 %);
    }
    .wird geladen {
      Position: relativ;
      Breite: 200px;
      Höhe: 50px;
      Anzeige: Flex;
    }
    .essen {
      Position: relativ;
      Breite: 50px;
      Höhe: 50px;
      links: 0;
      Farbe: #ff0000;
      Animation: Eat-Animate 2,4 s, unendliches Ein- und Aussteigen;
    }
    @keyframes essen-animieren {
      100 % {
        links: 150px;
      }
    }
    .essen::vorher {
      Inhalt: '';
      Position: absolut;
      Breite: 0;
      Höhe: 0;
      Breite: 50px;
      Höhe: 25px;
      oben: 0;
      Rahmenradius: 50px 50px 0 0;
      Hintergrund: aktuelle Farbe;
      transformieren: drehen (-30 Grad);
      Animation: Eat-Top, 2,4 s, unendliches Ein- und Aussteigen;
    }
    @keyframes essen-oben {
      20% {
        transformieren: drehen (-30 Grad);
      }
      35 % {
        transformieren: drehen (0 Grad);
      }
      45 % {
        transformieren: drehen (-30 Grad);
      }
      60 % {
        transformieren: drehen (0 Grad);
      }
      70 % {
        transformieren: drehen (-30 Grad);
      }
      85 % {
        transformieren: drehen (0 Grad);
      }
      100 % {
        transformieren: drehen (0 Grad);
      }
    }
    .essen::nach {
      Inhalt: '';
      Position: absolut;
      Breite: 0;
      Höhe: 0;
      Breite: 50px;
      Höhe: 25px;
      unten: 0;
      Rahmenradius: 0 0 50px 50px;
      Hintergrund: aktuelle Farbe;
      transformieren: drehen (30 Grad);
      Animation: Eat-Bottom, 2,4 s, unendliches Ein- und Aussteigen;
    }
    @keyframes essen-unten {
      20% {
        transformieren: drehen (30 Grad);
      }
      35 % {
        transformieren: drehen (0 Grad);
      }
      45 % {
        transformieren: drehen (30 Grad);
      }
      60 % {
        transformieren: drehen (0 Grad);
      }
      70 % {
        transformieren: drehen (30 Grad);
      }
      85 % {
        transformieren: drehen (0 Grad);
      }
      100 % {
        transformieren: drehen (0 Grad);
      }
    }
    .laden {
      Position: relativ;
      Breite: 30px;
      Höhe: 30px;
      Rand: 10px;
      Farbe: #e47272;
      Randradius: 50 %;
      Hintergrund: aktuelle Farbe;
    }
    .load:n-tes-Kind(2) {
      Animation: Laden1 2,4 s linear unendlich;
      transformieren: Skalierung(1);
    }
    @keyframes laden1 {
      35 % {
        transformieren: Skalierung(0);
      }
      100 % {
        transformieren: Skalierung(0);
      }
    }
    .load:n-tes-Kind(3) {
      Animation: Laden2 2,4 s linear unendlich;
      transformieren: Skalierung(1);
    }
    @keyframes laden2 {
      30% {
        transformieren: Skalierung(1);
      }
      58 %
        transformieren: Skalierung(0);
      }
      100 % {
        transformieren: Skalierung(0);
      }
    }
    .load:n-tes-Kind(4) {
      Animation: Laden3 2,4 s linear unendlich;
      transformieren: Skalierung(1);
    }
    @keyframes laden3 {
      60 % {
        transformieren: Skalierung(1);
      }
      80 % {
        transformieren: Skalierung(0);
      }
      100 % {
        transformieren: Skalierung(0);
      }
    }