순수 CSS를 사용하여 이미지 캐러셀을 구현하는 방법

구현 아이디어:

(권장 학습: css 빠른 시작)

• 같은 크기의 여러 이미지를 준비하세요

• 이미지 컨테이너에 가로로 표시될 이미지를 배열하세요

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

• 그림 컨테이너에 사용자 정의 애니메이션을 추가하고 애니메이션의 여러 단계에서 증분 오프셋 값을 설정합니다

참고:

• 애니메이션 효과 포인트 전환 및 유지 부분의 경우

• 맞춤형 애니메이션 단계는 사진 수와 관련이 있습니다

• 애니메이션 각 단계의 오프셋 값은 사진 크기와 관련이 있습니다

• 이 글의 예시에서는 마지막 사진에서 첫 번째 사진으로 전환 효과가 없습니다. 한 가지 아이디어는 마지막 사진에서 첫 번째 사진으로 하나씩 전환하는 것입니다.

HTML 코드:

<div id="container">
    <div id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</div>

코드 분석:

여기서 세 개의 img 요소가 생성됩니다. img 요소 외부는 이미지 컨테이너이고, 이미지 컨테이너 외부는 디스플레이 컨테이너입니다.

css 코드:

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
 
#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}
 
#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}
 
@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

코드 분석:

• 디스플레이 컨테이너 크기는 이미지 크기와 동일합니다.

• 이미지에 플로트 효과를 추가하면 번거로운 여백 문제를 고려할 필요가 없습니다

• 이후 예제에는 이미지가 3개만 있으므로 추가합니다. 애니메이션 단계가 3개 있고, 각 단계는 증가하는 왼쪽 여백 값을 설정하여 전환 효과를 얻습니다

• 설정된 애니메이션 단계(예: 35%~60%)가 드웰입니다. 애니메이션의 일부이며 이전 단계에서 자유롭습니다. 시간(예: 25%~35%)은 애니메이션 전환 부분입니다. 각 부분의 길이는 직접 조정해야 합니다

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