이 글에서는 CSS(코드 예제)를 사용하여 스크롤 사진 표시줄을 구현하는 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
일부 웹사이트에서는 일부 사진이 계속 스크롤되는 것을 종종 볼 수 있습니다. 이 효과는 CSS 애니메이션 효과를 통해 얻을 수 있습니다. 구체적인 효과는 다음과 같습니다
주요 원리는 애니메이션을 통해 왼쪽으로 이동하는 것입니다.
먼저 동일한 그림 두 세트를 (같은 줄에) 주고 전체 그림을 한 세트의 그림 길이만큼 왼쪽으로 이동합니다.
이렇게 하면 마지막에 원래 위치로 빠르게 돌아갑니다. 두 번째 그룹과 완전히 동일한 애니메이션입니다. 이미지가 번갈아 가며 연속 루프에서 왼쪽으로 스크롤되는 일련의 이미지처럼 보입니다.
구체적인 단계는 다음과 같습니다.
1. 본문 코드의 모든 곳에 동일한 그림 두 세트를 설정합니다.
<nav> <ul> <li><img src="Images/1 (2).jpg" alt=""></li> <li><img src="Images/2 (2).jpg" alt=""></li> <li><img src="Images/3 (2).jpg" alt=""></li> <li><img src="Images/1 (2).jpg" alt=""></li> <li><img src="Images/2 (2).jpg" alt=""></li> <li><img src="Images/3 (2).jpg" alt=""></li> </ul> </nav>
2 탐색 크기를 설정합니다. 너비는 그림 그룹의 너비를 합친 것입니다. 높이는 사진의 높이입니다.
nav { width: 750px; height: 170px; border: 1px solid red; margin: 100px auto; }
3 ul 크기를 설정하고 너비는 nav의 두 배, 높이는 nav와 동일하며 애니메이션 관련 속성을 지정합니다.
ul { width: 200%; height: 100%; animation: picmove 5s linear infinite forwards; }
4 주로 그룹의 길이를 이동합니다. 의 왼쪽 사진
@keyframes picmove { from { transform: translate(0); } to { transform: translate(-750px); } }
5. 추가 마우스를 가리키면 애니메이션이 일시 중지됩니다
ul:hover { animation-play-state: paused; }
6. 마지막으로 탐색에 hided(숨김)를 추가하여 스크롤되는 그림 막대 전체 세트를 숨깁니다. Ready
전체 코드는 다음과 같습니다
Document <nav> <ul> <li><img src="Images/1 (2).jpg" alt=""></li> <li><img src="Images/2 (2).jpg" alt=""></li> <li><img src="Images/3 (2).jpg" alt=""></li> <li><img src="Images/1 (2).jpg" alt=""></li> <li><img src="Images/2 (2).jpg" alt=""></li> <li><img src="Images/3 (2).jpg" alt=""></li> </ul> </nav>
요약: 위 내용은 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼 , CSS3 동영상 튜토리얼 을 방문하세요!
위 내용은 CSS로 스크롤되는 그림 막대를 구현하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!