CSS3-Analyse der Schritte zur Erstellung des Douyin-LOGO

<div Klasse="Zittern">
    <div Klasse="Logo"></div>
</div>

.jitter {
  Position: relativ;
  Breite: 200px;
  Rand: 100px automatisch;
}

// Teil 1.logo {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 47px;
  Höhe: 218px;
  Z-Index: 1;
  Hintergrund: #24f6f0;
}
// Der zweite Teil.logo::after {
  Inhalt: "";
  Position: absolut;
  Breite: 140px;
  Höhe: 140px;
  Rand: 40px durchgezogen #24f6f0;
  Rahmen rechts: 40px durchgehend transparent;
  Rahmen oben: 40px durchgehend transparent;
  Rahmen links: 40px durchgehend transparent;
  oben: -110px;
  rechts: -183px;
  Randradius: 100 %;
  transformieren: drehen (45 Grad);
  Z-Index: -10;
}
// Der dritte Teil.logo::before {
  Inhalt: "";
  Position: absolut;
  Breite: 100px;
  Höhe: 100px;
  Rand: 47px durchgezogen #24f6f0;
  Rahmen oben: 47px durchgehend transparent;
  Randradius: 50 %;
  oben: 121px;
  links: -147px;
  transformieren: drehen (45 Grad);
}

<div Klasse="Zittern">
    <div Klasse="Logo"></div>
    <div Klasse="Logo"></div>
</div>

...
// Lassen Sie die oben stehenden Stile weg …
// 10px vom ersten J entfernt
.logo:letztes-Kind {
  links: 10px;
  oben: 10px;
  Hintergrund: #fe2d52;
  Z-Index: 100;
}
// Füllen mit red.logo:last-child::before {
  Rand: 47px durchgezogen #fe2d52;
  Rahmen oben: 47px durchgehend transparent;
}
.logo:letztes-Kind::nach {
  Rand: 40px durchgezogen #fe2d52;
  Rahmen rechts: 40px durchgehend transparent;
  Rahmen oben: 40px durchgehend transparent;
  Rahmen links: 40px durchgehend transparent;
} 

Mix-Blend-Modus: Normal; Mix-Blend-Modus: Multiplizieren; Mix-Blend-Modus: Bildschirm; Mix-Blend-Modus: Überlagern; Mix-Blend-Modus: Abdunkeln; Mix-Blend-Modus: Aufhellen; Mix-Blend-Modus: Farbig abwedeln; Mix-Blend-Modus: Farbig nachbelichten; Mix-Blend-Modus: Hartes Licht; Mix-Blend-Modus: Weiches Licht; Mix-Blend-Modus: Unterschied; Mix-Blend-Modus: Ausschluss; Mix-Blend-Modus: Farbton; Mix-Blend-Modus: Sättigung; Mix-Blend-Modus: Farbe; Mix-Blend-Modus: Leuchtkraft; Mix-Blend-Modus: Initial;
Mix-Blend-Modus: erben;
Mix-Blend-Modus: nicht festgelegt;

.logo:letztes-Kind {
  ...
  Mix-Blend-Modus: Aufhellen;
}

.logo:letztes-Kind {
  ...
  Animation: Bewegung 10 s unendlich;
}
@keyframes verschieben {
  0% {
    transformieren: übersetzen (200px);
  }
  50 % {
    transformieren: übersetzen(0px);
  }
  100 % {
    transformieren: übersetzen(0px);
  }
}