순수 CSS를 사용하여 이미지 캐러셀을 구현하는 방법-CSS 튜토리얼-php.cn

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

醉折花枝作酒筹

풀어 주다： 2023-01-04 09:34:19

원래의

4224명이 탐색했습니다.

CSS에서는 애니메이션 속성과 @keyframes 규칙을 사용하여 이미지 캐러셀 효과를 얻을 수 있습니다. @keyframes를 사용하여 먼저 애니메이션을 만든 다음 애니메이션 속성을 사용하여 필요한 애니메이션의 시간, 속도 및 수를 설정하세요.

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

이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

먼저 동일한 크기의 여러 이미지를 준비하고 이미지 컨테이너에 가로로 표시할 이미지를 배열합니다. 이미지 컨테이너 외부에 디스플레이 컨테이너를 추가합니다. 디스플레이 컨테이너의 크기는 이미지의 크기입니다. 이미지 컨테이너에 사용자 정의 애니메이션을 추가하고 애니메이션의 여러 단계에서 증분 오프셋 값을 설정합니다.

애니메이션 효과는 전환과 유지의 두 부분으로 나누어집니다. 사용자 정의 애니메이션 단계는 사진 수와 관련이 있으며 애니메이션 각 단계의 오프셋 값은 사진 크기와 관련이 있습니다.

이 글의 예는 첫 번째 사진에서 마지막 사진으로 전환하는 것입니다.

HTML

<body>
        <div id="container">
            <div id="photo">
                <img  src="images/1.jpg" / alt="순수 CSS를 사용하여 이미지 캐러셀을 구현하는 방법" >
                <img  src="images/2.jpg" / alt="순수 CSS를 사용하여 이미지 캐러셀을 구현하는 방법" >
                <img  src="images/3.jpg" / alt="순수 CSS를 사용하여 이미지 캐러셀을 구현하는 방법" >
            </div>
        </div>
    </body>

로그인 후 복사

분석:
여기에서는 세 개의 img 요소가 생성됩니다. img 요소 외부는 그림 컨테이너이고, 그림 컨테이너 외부는 디스플레이 컨테이너입니다.

CSS

<style type="text/css">
            #container {
                width: 400px;
                overflow: hidden;
            }
            #photo {
                width: 1200px;
                animation: switch 5s ease-out infinite;
            }
            #photo > img {
                float: left;
                width: 400px;
            }
            @keyframes switch {
                0%, 25% {
                    margin-left: 0;
                }
                35%, 60% {
                    margin-left: -400px;
                }
                70%, 100% {
                    margin-left: -800px;
                }
            }
        </style>

로그인 후 복사

렌더링:

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

분석:

디스플레이 컨테이너 크기가 이미지 크기와 일치합니다.
이미지에 부동 효과를 추가합니다. 고려할 필요가 없습니다. 는 귀찮은 여백 문제;
예제에는 세 개의 그림만 있으므로 세 개의 애니메이션 단계가 추가됩니다. 각 단계는 증가하는 여백 왼쪽 값을 설정하여 전환 효과를 얻습니다.
설정된 애니메이션 단계(예: 35) %~60%)는 애니메이션의 드웰 부분이고, 이전 단계의 여유 시간(예: 25%~35%)은 애니메이션 전환 부분입니다. 각 부분의 길이는 직접 조절해야 합니다.

추천 학습: "css 비디오 튜토리얼"

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