Apple Musicの再作成CSSのプレイリストアニメーションにヒットします

Apple Musicの「Spatial Audio」機能は、デバイスのポジショニングに基づいて方向性のあるサウンドエクスペリエンスを作成します。ただし、この記事では、空間オーディオトラックを備えたApple Music Playlistで観察されるCSSアニメーションの再作成に焦点を当てています。プレイリストカバーには、箱から順番にアニメーション化するボックスが付いたピンクの容器が表示されます。中央からフェードインしてから外側にスケーリングしてフェードアウトし、無限のループを作成します。

このチュートリアルでは、CSSを使用してこの効果を再現する方法を詳しく説明しています。

HTML構造：

HTMLは非常にシンプルで、コンテナと10個の個別のボックス要素で構成されています。

<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 Grow {
  から {
    不透明度：0.5;
    変換：スケール（0）;
  }
  に {
    不透明：0;
    変換：スケール（3.85）;
  }
}

:nth-child(n) selectorとcalc()関数は、各ボックスの--delayを動的に調整します。スケール係数（3.85）は、ボックスとコンテナの寸法に基づいて計算され、ボックスがコンテナの端に到達するようにします。

このアプローチは、CSSのみを使用してApple Music Playlistアニメーションを効果的に再現し、複雑な視覚効果を単純なコードで複製するための創造的なソリューションを実証します。

以上がApple Musicの再作成CSSのプレイリストアニメーションにヒットしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。