CSS에서 이미지를 스크롤하는 방법-CSS 튜토리얼-php.cn

CSS에서 이미지를 스크롤하는 방법

藏色散人

풀어 주다： 2022-12-30 11:12:52

원래의

8576명이 탐색했습니다.

CSS에서 그림을 스크롤하는 방법: 먼저 기본 코드의 각 부분에 동일한 그림 두 세트를 설정한 다음 nav 및 ul 크기를 설정하고 애니메이션을 정의하고 마우스 호버 및 애니메이션 일시 중지 효과를 추가합니다. ; 마지막으로 nav :hidden에 "overflow"를 추가하여 초과된 부분을 숨깁니다.

CSS에서 이미지를 스크롤하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.

추천: css 비디오 튜토리얼

먼저 동일한 그림 두 세트를 (같은 줄에) 제공하고 전체 그림을 그림 세트의 길이만큼 왼쪽으로 이동합니다.

이렇게 하면 애니메이션이 끝나면 빠르게 원래 위치로 돌아가고 이때 두 번째 사진 세트가 계속해서 왼쪽으로 스크롤되는 것처럼 보입니다.

구체적인 단계는 다음과 같습니다.

1. 메인 코드의 모든 곳에 동일한 그림 두 세트를 설정합니다.

<nav>
  <ul>
<li>
  <img src="image/1.jpg" alt=""></li>
<li>
  <img src="image/2.jpg" alt=""></li>
<li>
  <img src="image/3.jpg" alt=""></li>
<li>
  <img src="image/4.jpg" alt=""></li>
<li>
  <img src="image/5.jpg" alt=""></li>
<li>
  <img src="image/6.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. 마지막으로 탐색에 Overflow:hidden을 추가하여 스크롤되는 그림 막대 전체가 준비되도록 합니다.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
        }
        
        ul {
            width: 200%;
            height: 100%;
            animation: picmove 5s linear infinite forwards;
        }
        
        @keyframes picmove {
            from {
                transform: translate(0);
            }
            to {
                transform: translate(-750px);
            }
        }
        
        img {
            width: 250px;
            height: 170px;
            float: left;
        }
        
        ul:hover {
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><img src="image/1.jpg" alt=""></li>
            <li><img src="image/2.jpg" alt=""></li>
            <li><img src="image/3.jpg" alt=""></li>
            <li><img src="image/4.jpg" alt=""></li>
            <li><img src="image/5.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
        </ul>
    </nav>
</body>
</html>

로그인 후 복사

렌더링:

CSS에서 이미지를 스크롤하는 방법