CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법: 먼저 애니메이션 속성을 사용하여 선택기에 바인딩할 키프레임의 이름, 애니메이션을 완료하는 데 걸리는 시간, 애니메이션의 속도 곡선 및 개수를 설정합니다. 애니메이션이 재생된 다음 @keyframes 규칙을 사용하여 각 키프레임의 이미지 위치 지정 스타일을 지정하는 회전식 애니메이션을 만듭니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
(추천 튜토리얼: CSS 비디오 튜토리얼)
CSS3를 사용하여 구현: 애니메이션 속성 + @keyframes 규칙 사용
(캐러셀을 하나씩 구현, 육안으로는 하나의 그림만 볼 수 있음)
HTML 부분 비교적 간단합니다. 원활한 캐러셀을 만들기 위해 두 개의 div 아래에 여러 개의 img 태그가 있습니다. 첫 번째 사진은 마지막 사진과 동일해야 합니다.
<div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" > <img src="img/child.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" > <img src="img/girl.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" > <img src="img/milk.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" > <img src="img/cup.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" > <img src="img/dog.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" > <img src="img/beatuy.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" > </div> </div>
가장 바깥쪽 div는 ovflow: Hidden으로 설정됩니다. ; position:relative; 따라서 내부 div는 position:absolute로 설정되어야 합니다.
CSS 코드는 다음과 같습니다.
이렇게 하면 이미지를 회전할 수 있습니다. 하지만 마우스를 올려도 사진은 여전히 회전하고 있습니다. 마우스를 사진 위에 놓았을 때 회전판이 멈추거나 일부 정보가 나타나도록 하려면 다음을 추가해야 합니다. 애니메이션 상태에서 코드는 매우 간단합니다..out{ width: 200px; height: 100px; overflow: hidden; position: relative; } .imgs { width: 1400px; height: 100px; position: absolute; animation: ppt 10s linear infinite; } img { float: left; width: 200px; height: 100px; } @keyframes ppt { 0% { left: 0px } 20% { left: -250px } 40% { left: -500px } 60% { left: -750px } 80% { left: -1000px } 100% { left: -1200px } }캐러셀 효과가 나오도록 더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 학습을 방문하세요. !
위 내용은 CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!