Mewujudkan Animasi Senarai Muzik Apple Hits di CSS

Ciri "Audio Spatial" Apple Music mencipta pengalaman bunyi arah berdasarkan kedudukan peranti. Walau bagaimanapun, artikel ini memberi tumpuan kepada mencipta animasi CSS yang diperhatikan pada senarai main muzik Apple yang memaparkan trek audio spatial. Perlindungan senarai main mempamerkan bekas merah jambu dengan kotak yang menghidupkan secara berurutan: memudar dari pusat, kemudian berskala ke luar dan memudar, mencipta gelung tak terhingga.

Tutorial ini memperincikan bagaimana untuk meniru kesan ini menggunakan CSS.

Struktur HTML:

HTML sangat mudah, terdiri daripada bekas dan sepuluh elemen kotak individu:

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

Gaya CSS:

Kod CSS gaya kedua -dua bekas dan kotak individu.

Gaya kontena:

Bekas ini digayakan dengan latar belakang merah jambu, dimensi khusus (kira -kira sepadan dengan visual muzik Apple), sudut bulat, dan overflow: hidden untuk mengelakkan limpahan kotak. Grid digunakan untuk berpusat:

 .container {
  latar belakang warna: #eb5bec;
  Radius sempadan: 16px;
  Ketinggian: 315px;
  Limpahan: Tersembunyi;
  Kedudukan: Relatif; / * Untuk kedudukan mutlak kotak */
  lebar: 385px;
  paparan: grid;
  Tempat-item: Pusat;
}

Gaya dan Animasi Kotak:

Setiap kotak diberi warna latar belakang gelap, kelegapan awal, dan kedudukan mutlak. Animasi utama, grow , menggunakan @keyframes untuk menentukan perubahan skala dan kelegapan. Hartanah tersuai --delay mengawal kelewatan animasi untuk setiap kotak, mewujudkan kesan yang berperingkat:

 .box {
  Latar Belakang: #471E45;
  Ketinggian: 100px;
  Kelegapan: 0.5;
  Kedudukan: Mutlak;
  lebar: 100px;
  Animasi: Tumbuh 10s Linear Infinite; / * 10 saat untuk 10 kotak */
  Transform-asal: pusat; / * Memastikan skala dari pusat */
}

.box: nth-child (n) {
  --elay: calc (1s * var (-n)); / * Kelewatan animasi yang mengejutkan */
}

@keyframes tumbuh {
  dari {
    Kelegapan: 0.5;
    Transform: Skala (0);
  }
  ke {
    Kelegapan: 0;
    Transform: Skala (3.85);
  }
}

Pemilih :nth-child(n) pemilih dan fungsi calc() secara dinamik menyesuaikan --delay untuk setiap kotak. Faktor skala (3.85) dikira berdasarkan dimensi kotak dan kontena untuk memastikan kotak mencapai tepi kontena.

Pendekatan ini secara berkesan mencipta semula Animasi Senarai Muzik Apple menggunakan hanya CSS, menunjukkan penyelesaian kreatif untuk mereplikasi kesan visual kompleks dengan kod mudah.

Atas ialah kandungan terperinci Mewujudkan Animasi Senarai Muzik Apple Hits di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!