CSS를 사용하여 이미지 시퀀스의 원활한 재생 효과를 달성하는 방법은 무엇입니까?

부드러운 그림 시퀀스 재생 효과를 만드는 방법?

많은 응용 프로그램 시나리오에는 시뮬레이션 된 비디오 재생이 필요하지만 자료는 비디오가 아니라 여러 사진입니다. 이미지 경로를 직접 교체하면 이미지 로딩 시간의 차이로 인해 검은 색 화면 또는 지연이 쉽게 발생할 수 있습니다. 이 기사는 효율적이고 부드러운 솔루션을 제공합니다.

단순한 그림의 간단한 로딩은 하나씩 지연되기 쉽기 때문에 더 나은 솔루션을 채택합니다. 이미지가 같은 크기라고 가정하면 긴 그림으로 가로로 연결됩니다. 그런 다음 CSS 및 @keyframes 애니메이션의 background-position 속성을 사용하여 배경 이미지의 오프셋을 제어하여 이미지 전환을 달성하십시오.

예를 들어, 3 개의 500x300 픽셀 사진이 있으며 스티칭 후 1500x300 픽셀의 긴 그림이 있습니다. 다음 CSS 코드는 사진 루프 재생을 구현합니다.

 .Container {
  너비 : 500px;
  높이 : 300px;
  배경 : URL ( "분할 이미지") LEFT / AUTO 100% NO-Repeat;
  애니메이션 : 재생 시간 단계 (3, 시작) 0S Infinite; / * 단계 (사진 수, 시작) */
}

@keyframes play {
  0% {배경 위치 : 0 0; } /* 사진 1* /
  33.3% {배경 위치 : -500px 0; } /* 사진 2* /
  66.7% {배경 위치 : -1000px 0; } /* 사진 3* /
  100% {배경 위치 : 0 0; } /* 첫 번째 그림으로 돌아 가기* /
}

코드에서 .container 컨테이너 크기를 정의하고 background 속성은 스티치 된 이미지를 배경으로 설정하고 animation 속성은 재생 애니메이션을 정의합니다. steps(3, start) 이미지가 단계별로 전환되도록하고 infinite 무한 루프를 의미합니다. background-position 디스플레이 영역을 제어합니다. 열쇠는 각 이미지의 오프셋을 정확하게 계산하여 @keyframes 로 작성하는 것입니다. 재생 지속 시간은 사진 수와 필요한 속도에 따라 조정됩니다. 이 방법은 간단하고 효율적이며, 하나씩로드하는 지연 문제를 피하고 부드러운 그림 시퀀스 재생을 달성합니다.

위 내용은 CSS를 사용하여 이미지 시퀀스의 원활한 재생 효과를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!