CSS로 스크롤되는 그림 막대를 구현하는 방법(코드 예)

이 글에서는 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

전체 코드는 다음과 같습니다

    
    
    
    
    
    <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!