CSS는 캐러셀 효과를 실현합니다(코드 포함).

CSS를 사용하여 캐러셀 효과 구현(코드 포함)

이론적 기초

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

주요 아이디어

1. 같은 크기 Pictures

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

3. 그림 컨테이너 외부에 표시 컨테이너를 추가하고, 표시 컨테이너의 크기는 그림 크기와 동일합니다

4. 그림 컨테이너와 애니메이션이 다릅니다. 스테이지 설정 증분 오프셋 값

Notes

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

• 사용자 정의 애니메이션 스테이지는 Pictures

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

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

HTML

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

분석:
여기 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;
	}
}

분석:

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

2. 번거로운 여백 문제를 고려하지 않고 이미지에 플로팅 효과를 추가합니다.

3. 예시에는 이미지가 3개뿐이므로 3개의 애니메이션 단계를 추가했습니다. 각 단계는 증가하는 여백 왼쪽 값을 설정하여 전환 효과를 얻습니다.

4. 설정된 애니메이션 단계(예: 35%~60%) 는 애니메이션의 드웰 부분이고, 이전 단계의 여유 시간(예: 25%~35%)은 애니메이션 전환 부분입니다. 각 부분의 길이는 스스로 조절해야 합니다

런닝 효과

읽어주셔서 감사합니다. 많은 도움이 되셨으면 좋겠습니다.

이 기사는 https://blog.csdn.net/u011848617/article/details/80468463

추천 튜토리얼: "

CSS Tutorial"에서 복제되었습니다.

위 내용은 CSS는 캐러셀 효과를 실현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!