CSS를 사용하여 스크롤 그림 막대를 구현하는 방법(코드 포함)-CSS 튜토리얼-php.cn

CSS를 사용하여 스크롤 그림 막대를 구현하는 방법(코드 포함)

不言

풀어 주다： 2018-09-25 17:52:25

원래의

3103명이 탐색했습니다.

이 글의 내용은 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, 그리고 마지막으로 오버플로를 추가합니다: 초과 부분을 숨기기 위해 탐색에 숨김을 추가하여 전체 스크롤 그림 열 세트가 준비되도록 합니다.

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

#🎜🎜 #





    
    
    
    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를 사용하여 스크롤 그림 막대를 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!