Nachbauen der Apple Music Hits Playlist Animation in CSS

Die "räumliche Audio" -Funktion von Apple Music erzeugt ein Richtungsklangerlebnis, das auf Gerätepositionierung basiert. Dieser Artikel konzentriert sich jedoch auf die Nachbildung einer CSS -Animation, die auf einer Apple Music -Wiedergabeliste mit räumlichen Audio -Tracks beobachtet wurde. Das Playlist -Cover zeigt einen rosa Container mit nacheinander angenommenen Boxen: Verblassen aus der Mitte, dann nach außen und verblassen, um eine unendliche Schleife zu erstellen.

In diesem Tutorial wird beschrieben, wie dieser Effekt mit CSS repliziert.

HTML -Struktur:

Das HTML ist bemerkenswert einfach und besteht aus einem Behälter und zehn einzelnen Kastenelementen:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS -Styling:

Der CSS -Code stilft sowohl den Container als auch die einzelnen Boxen.

Container -Styling:

Der Container ist mit einem rosa Hintergrund, spezifischen Abmessungen (ungefähr dem Apple Music Visual), abgerundeten Ecken und overflow: hidden , um einen Überlauf zu verhindern. Grid wird zum Zentrieren verwendet:

 .Container {
  Hintergrundfarbe: #EB5BEC;
  Grenzradius: 16px;
  Höhe: 315px;
  Überlauf: versteckt;
  Position: Relativ; / * Für die absolute Positionierung von Kästchen *//
  Breite: 385px;
  Anzeige: Grid;
  Orts-Element: Zentrum;
}

Box -Styling und Animation:

Jede Box erhält eine dunkle Hintergrundfarbe, eine anfängliche Deckkraft und die absolute Positionierung. Die Schlüsselanimation, grow , verwendet @keyframes um die Veränderungen der Skalierung und der Deckkraft zu definieren. Eine benutzerdefinierte Eigenschaft --delay steuert die Animationsverzögerung für jedes Feld und erstellt den gestaffelten Effekt:

 .Kasten {
  Hintergrund: #471e45;
  Höhe: 100px;
  Deckkraft: 0,5;
  Position: absolut;
  Breite: 100px;
  Animation: 10S linear unendlich wachsen; / * 10 Sekunden für 10 Boxen *//
  Transform-Ursprung: Zentrum; / * Sorgt skalieren aus der Mitte */
}

.box: nth-Kind (n) {
  -Delay: Calc (1S * var (-n)); / * Staffelungsanimationsverzögerung *//
}

@keyframes wachsen {
  aus {
    Deckkraft: 0,5;
    Transformation: Skala (0);
  }
  Zu {
    Deckkraft: 0;
    Transformation: Skala (3,85);
  }
}

Der :nth-child(n) -Auskild und die Funktion calc() passen das --delay für jedes Kasten dynamisch ein. Der Skalierungsfaktor (3,85) wird basierend auf den Box- und Containerabmessungen berechnet, um sicherzustellen, dass die Kästchen die Containerkanten erreichen.

Dieser Ansatz stellt die Apple Music Playlist -Animation mit nur CSS effektiv nach und zeigt eine kreative Lösung zur Replikation komplexer visueller Effekte mit einfachem Code.

Das obige ist der detaillierte Inhalt vonNachbauen der Apple Music Hits Playlist Animation in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!