CSS3를 사용하여 이미지 자동 회전 효과를 얻는 방법(전체 코드 첨부)

이 글에서는 CSS3를 사용하여 이미지의 캐러셀 효과를 구현하는 방법을 소개하고 구체적인 단계에 중점을 두고 내용이 간결하며 모두가 뭔가를 얻을 수 있기를 바랍니다.

웹을 탐색할 때 사진 회전식이라는 특수 효과를 접하게 됩니다. 동일한 위치에 있는 여러 사진이 시간 변화에 따라 반복 재생되어 슬라이드쇼를 재생하는 것과 유사한 효과를 얻습니다. 그렇다면 웹 개발 과정에서 이미지의 캐러셀 효과를 어떻게 구현할까요? 이 문서에서는 CSS3를 사용하여 이미지 캐러셀 효과를 얻는 방법을 보여줍니다.

Css3를 사용하여 캐러셀 효과를 얻는 주요 아이디어

같은 위치에 같은 크기의 여러 이미지를 준비하여 div 컨테이너에 가로로 배치한 다음 디스플레이 컨테이너를 설정하겠습니다. 디스플레이 컨테이너의 크기가 이미지의 크기와 동일한 div 컨테이너 위에 마지막으로 사용자 정의 애니메이션이 이미지 컨테이너에 추가되고 증분 오프셋 값이 애니메이션의 여러 단계에서 설정됩니다.

Note

애니메이션 효과는 스위치와 스테이 두 부분으로 나누어져 있습니다.

애니메이션의 오프셋 값은 이미지 크기와 관련이 있습니다.

Css3를 사용하여 캐러셀 효과를 구현하는 원리

먼저 디스플레이 컨테이너의 크기가 이미지의 크기와 동일한지 확인한 후 이미지에 플로트 효과를 추가한 다음 삽입할 이미지 수를 결정하고 각 이미지에 대한 애니메이션 단계를 설정합니다. 각 단계에서는 키프레임을 사용하여 증가하는 왼쪽 여백 값을 설정하여 전환 효과를 얻습니다.

css3을 사용하여 이미지 캐러셀 효과를 구현하는 단계(코드)

1단계: HTML을 사용하여 이미지 추가

<div id="container">
    <div id="photo">
        <img  src="1.png" / alt="CSS3를 사용하여 이미지 자동 회전 효과를 얻는 방법(전체 코드 첨부)" >
        <img  src="2.png" / alt="CSS3를 사용하여 이미지 자동 회전 효과를 얻는 방법(전체 코드 첨부)" >
        <img  src="3.png" / alt="CSS3를 사용하여 이미지 자동 회전 효과를 얻는 방법(전체 코드 첨부)" >
    </div>
</div>

2단계: CSS3를 사용하여 애니메이션 스테이지 설정

#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;
}
}

이미지 캐러셀 렌더링 구현

더 멋진 CSS3 및 자바스크립트 특수 효과 코드가 모두 포함되어 있습니다: js 특수 효과 컬렉션

위 내용은 CSS3를 사용하여 이미지 자동 회전 효과를 얻는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!