重新創建Apple Music在CSS中擊中播放列表動畫

Apple Music的“空間音頻”功能創建了基於設備定位的定向聲音體驗。但是，本文的重點是重新創建在帶有空間音軌的Apple Music播放列表上觀察到的CSS動畫。播放列表封面展示了一個粉紅色的容器，其中包裝盒有動畫：從中心褪色，然後向外縮放並褪色，創建一個無限的循環。

本教程詳細介紹瞭如何使用CSS複製此效果。

HTML結構：

HTML非常簡單，由容器和十個單獨的盒子元素組成：

<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樣式：

CSS代碼樣式的容器和各個框。

容器樣式：

該容器具有粉紅色的背景，特定的尺寸（大約與Apple Music Visual匹配），圓角和overflow: hidden以防止盒子溢出。網格用於中心：

 。容器 {
  背景色：＃eb5bec;
  邊界拉迪烏斯：16px;
  身高：315px;
  溢出：隱藏；
  位置：相對； / *用於絕對定位盒 */
  寬度：385px;
  顯示：網格；
  地點項目：中心；
}

框樣式和動畫：

每個盒子都有深色背景顏色，初始不透明度和絕對定位。關鍵動畫， grow ，使用@keyframes來定義縮放和不透明度更改。自定義屬性--delay控制每個框的動畫延遲，從而產生交錯效果：

 。盒子 {
  背景：＃471E45;
  身高：100px;
  不透明度：0.5;
  位置：絕對；
  寬度：100px;
  動畫：成長10s線性無限； / * 10盒10秒 */
  轉化原始：中心； / *確保從中心縮放 */
}

.box：nth-​​child（n）{
  -delay：calc（1s * var（-n））; / *交錯動畫延遲 */
}

@KeyFrames成長{
  從 {
    不透明度：0.5;
    變換：比例（0）;
  }
  到 {
    不透明度：0;
    變換：比例尺（3.85）;
  }
}

:nth-child(n)選擇器和calc()函數動態調整每個框的--delay 。比例因子（3.85）是根據框和容器尺寸計算的，以確保框到達容器邊緣。

這種方法僅使用CSS有效地重新創建了Apple Music播放列表動畫，展示了一種創造性的解決方案，可通過簡單的代碼複製複雜的視覺效果。

以上是重新創建Apple Music在CSS中擊中播放列表動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！