Recréer l'Apple Music frappe l'animation de playlist dans CSS

La fonction "Spatial Audio" d'Apple Music crée une expérience sonore directionnelle basée sur le positionnement de l'appareil. Cet article, cependant, se concentre sur la recréation d'une animation CSS observée sur une liste de lecture Apple Music avec des pistes audio spatiales. La couverture de playlist présente un récipient rose avec des boîtes animées séquentiellement: s'estompant du centre, puis se déplaçant vers l'extérieur et s'estompant, créant une boucle infinie.

Ce tutoriel détaille comment reproduire cet effet à l'aide de CSS.

Structure HTML:

Le HTML est remarquablement simple, composé d'un conteneur et de dix éléments de boîte individuelle:

<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>

Style CSS:

Le code CSS stylise à la fois le conteneur et les boîtes individuelles.

Style de conteneur:

Le conteneur est stylé avec un fond rose, des dimensions spécifiques (correspondant approximativement au visuel de la musique Apple), des coins arrondis et overflow: hidden pour empêcher le débordement de la boîte. La grille est utilisée pour centrer:

 .Container {
  Color d'arrière-plan: # eB5Bec;
  Border-Radius: 16px;
  Hauteur: 315px;
  débordement: caché;
  Position: relative; / * Pour le positionnement absolu des boîtes * /
  Largeur: 385px;
  Affichage: grille;
  Items de lieu: Centre;
}

Styling et animation:

Chaque boîte reçoit une couleur d'arrière-plan sombre, une opacité initiale et un positionnement absolu. L'animation clé, grow , utilise @keyframes pour définir les changements de mise à l'échelle et d'opacité. Une propriété personnalisée --delay contrôle le retard d'animation pour chaque case, créant l'effet décalé:

 .boîte {
  Contexte: # 471E45;
  hauteur: 100px;
  Opacité: 0,5;
  Position: absolue;
  Largeur: 100px;
  Animation: cultiver des 10s linéaires infinis; / * 10 secondes pour 10 boîtes * /
  Transform-Origin: Centre; / * Assure la mise à l'échelle du centre * /
}

.box: nth-child (n) {
  --Delay: calc (1s * var (- n)); / * Délai d'animation de décalage * /
}

@KeyFrames Grow {
  depuis {
    Opacité: 0,5;
    transformée: échelle (0);
  }
  à {
    Opacité: 0;
    transformée: échelle (3,85);
  }
}

Le sélecteur :nth-child(n) et la fonction calc() ajustez dynamiquement le --delay pour chaque case. Le facteur d'échelle (3,85) est calculé sur la base des dimensions de la boîte et du conteneur pour garantir que les cases atteignent les bords du conteneur.

Cette approche recrée efficacement l'animation de playlist Apple Music en utilisant uniquement CSS, démontrant une solution créative pour reproduire les effets visuels complexes avec du code simple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!