CSS의 Apple Music Hits Playlist 애니메이션을 재현합니다

Apple Music의 "공간 오디오"기능은 장치 위치를 기반으로 방향성 사운드 경험을 만듭니다. 그러나이 기사는 공간 오디오 트랙을 특징으로하는 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 . 그리드는 센터링에 사용됩니다.

 .Container {
  배경색 : #eb5bec;
  Border-Radius : 16px;
  높이 : 315px;
  오버플로 : 숨겨진;
  위치 : 상대; / * 상자의 절대 포지셔닝 */
  너비 : 385px;
  디스플레이 : 그리드;
  장소 항목 : 센터;
}

박스 스타일 및 애니메이션 :

각 상자에는 어두운 배경색, 초기 불투명도 및 절대 포지셔닝이 제공됩니다. 핵심 애니메이션 인 grow 는 @keyframes 사용하여 스케일링 및 불투명도 변경을 정의합니다. 사용자 정의 속성 --delay 각 상자의 애니메이션 지연을 제어하여 비틀 거리는 효과를 만듭니다.

 .상자 {
  배경 : #471E45;
  높이 : 100px;
  불투명도 : 0.5;
  위치 : 절대;
  너비 : 100px;
  애니메이션 : 10S 선형 무한 성장; / * 10 상자의 경우 10 초 */
  변형-오리진 : 센터; / * 센터에서 스케일링을 보장 */
}

.box : nth-Child (n) {
  -델리 : calc (1s * var (-n)); / * 스 태거 애니메이션 지연 */
}

@keyframes 성장 {
  에서 {
    불투명도 : 0.5;
    변환 : 스케일 (0);
  }
  에게 {
    불투명도 : 0;
    변환 : 스케일 (3.85);
  }
}

:nth-child(n) 선택기 및 calc() 함수는 각 상자의 --delay 동적으로 조정합니다. 스케일 계수 (3.85)는 상자와 컨테이너 치수에 따라 계산되어 상자가 컨테이너 가장자리에 도달 할 수 있습니다.

이 접근법은 CSS 만 사용하여 Apple Music Playlist 애니메이션을 효과적으로 재현하여 간단한 코드로 복잡한 시각 효과를 복제하기위한 창의적인 솔루션을 보여줍니다.

위 내용은 CSS의 Apple Music Hits Playlist 애니메이션을 재현합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!