CSS를 사용하여 이미지 캐러셀 효과를 얻는 방법은 무엇입니까? (코드 예)

이 글에서는 CSS로 이미지 캐러셀 효과를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

【추천 튜토리얼: CSS 동영상 튜토리얼】

이론적 기초

CSS3 애니메이션 속성 및 @keyframes 규칙

주요 아이디어

• 같은 사이즈

• 그림 컨테이너에 가로로 표시할 그림을 배치합니다.

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

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

Notes

• 애니메이션 효과는 전환과 유지의 두 부분으로 나뉩니다.

• 사용자 정의 애니메이션 단계는 Pictures

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

• 이 기사의 예에서는 마지막 사진에서 첫 번째 사진으로 전환 효과가 없습니다. 마지막 그림부터 첫 번째 그림까지

HTML

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

분석:
여기 만들기 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개만 있으므로 , 세 개의 애니메이션 단계가 추가됩니다. 각 단계는 증가하는 여백-왼쪽 값을 설정하여 전환 효과를 얻습니다.
• 설정된 애니메이션 단계(예: 35%~60%)는 애니메이션의 정지 부분이며, 유휴 시간입니다. 이전 단계(예: 25%~35%)는 애니메이션 전환 부분입니다. 각 부분의 길이는 직접 조정해야 합니다

런닝 효과

더 많은 프로그래밍 관련 지식을 원하시면 방문해주세요: 프로그래밍 비디오! !

위 내용은 CSS를 사용하여 이미지 캐러셀 효과를 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!