CSS에서 이미지 캐러셀을 구현하는 방법

CSS에서 그림 캐러셀을 구현하는 방법: 먼저 그림 컨테이너에 가로로 표시할 그림을 배치한 다음 그림 컨테이너 외부에 표시 컨테이너를 추가하고 마지막으로 표시 컨테이너의 크기는 그림의 크기입니다. 애니메이션의 여러 단계에서 증가하는 오프셋 값 설정에서 그림 컨테이너에 사용자 정의 애니메이션을 추가합니다.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS로 이미지 캐러셀을 구현하는 방법:

Css를 사용하면 이미지 캐러셀을 구현할 수 있습니다.

• 동일한 크기의 여러 이미지 준비

• 이미지 컨테이너에 가로로 표시되도록 이미지 정렬

• 이미지 컨테이너 외에 디스플레이 컨테이너를 추가합니다. 디스플레이 컨테이너의 크기는 이미지의 크기입니다

• 이미지 컨테이너에 사용자 정의 애니메이션을 추가하고 애니메이션의 다양한 단계에서 증분 오프셋 값을 설정합니다.

예:

HTML

<div id="container">
    <div id="photo">
        <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"   / alt="CSS에서 이미지 캐러셀을 구현하는 방법" >
        <img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy"   / alt="CSS에서 이미지 캐러셀을 구현하는 방법" >
        <img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy"   / alt="CSS에서 이미지 캐러셀을 구현하는 방법" >
    </div>
</div>

분석:

여기에서는 img 요소 외부가 그림 컨테이너이고 그림 컨테이너 외부가 디스플레이 컨테이너입니다.

관련 튜토리얼 권장 사항: CSS 비디오 튜토리얼

위 내용은 CSS에서 이미지 캐러셀을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!