CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

<!--Avatar-Bereich-->
<div Klasse="KopfPortrait-Panel">
    <!--Ebene wird geladen-->
    <div Klasse="load-panel loadWhirl">
        <!--Avatar-Anzeigeebene-->
        <div Klasse="headPortrait-img-panel avatarRotation">
            <img src="../assets/img/login/[email protected]"/>
        </div>
    </div>
</div>

  /*Avatar-Bereich*/
  .headPortrait-panel{
    Breite: 100 %;
    Höhe: 200px;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Rand oben: 50px;

    /*Ebene laden*/
    .Ladepanel{
      Breite: 240px;
      Höhe: 240px;
      Randradius: 50 %;
      Anzeige: Flex;
      Inhalt ausrichten: zentriert;
      Elemente ausrichten: zentrieren;
      Hintergrund: URL("../img/login/[email protected]");

      img{
        Breite: 100 %;
        Höhe: 100%;
      }

      // Avatar-Rotation animation.avatarRotation{
        Animation: interner Avatar, 3 s linear;
        // Animation Endlosschleife animation-iteration-count:infinite;
      }

      /*Avatar-Anzeigeebene*/
      .headPortrait-img-panel{
        Breite: 200px;
        Höhe: 200px;
        Randradius: 50 %;
        Überlauf: versteckt;
        Rand: durchgezogen 1px #ebeced;

        img{
          Breite: 100 %;
          Höhe: 100%;
        }
      }
    }

    // Externe Rotation animation.loadWhirl{
      Animation: extern Halo 3s linear;
      // Animation Endlosschleife animation-iteration-count:infinite;
    }
  }

  // Definieren Sie die externe Halo-Rotationsanimation @keyframes externalHalo {
    0 %{
      transformieren: drehen (0 Grad);
    }
    25 %
      transformieren: drehen (90 Grad);
    }
    50 %{
      transformieren: drehen (180 Grad);
    }
    100 %{
      transformieren: drehen (360 Grad);
    }
  }

  // Definiere die interne Avatar-Rotationsanimation @keyframes internalAvatar {
    0 %{
      transformieren: drehen (0 Grad);
    }
    25 %
      transformieren: drehen (-90 Grad);
    }
    50 %{
      transformieren: drehen (-180 Grad);
    }
    100 %{
      transformieren: drehen (-360 Grad);
    }
  }