How to scroll images in css-CSS Tutorial-php.cn

How to scroll images in css

藏色散人

Release： 2022-12-30 11:12:52

Original

8580 people have browsed it

How to scroll pictures in css: first set two identical pictures in each part of the main body code; then set the nav size and ul size; then define the animation, and add the effect of mouse hover and animation pause; finally give Just add "overflow:hidden" to nav to hide the excess part.

How to scroll images in css

The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, DELL G3 computer.

Recommended: css video tutorial

First give two sets of the same pictures (on the same line), and move the overall picture to the left by the length of one set of pictures.

In this way, it will quickly return to its original position at the end of the animation, and it will alternate with the second set of pictures at this time. It will look like a set of pictures scrolling to the left in a continuous loop.

The specific steps are as follows:

1. Set two sets of the same pictures everywhere in the main body code

<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>

Copy after login

2. Set the size of nav, and the width is the sum of a group of pictures Width and height are the height of the image.

nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
}

Copy after login

3. Set the ul size, the width is twice the nav, the height is the same as the nav, and specify the animation-related attributes

ul {
     width: 200%;
     height: 100%;
     animation: picmove 5s linear infinite forwards;
        }

Copy after login

4. Define the animation, mainly to move a group of pictures to the left The length

@keyframes picmove {
        from {
             transform: translate(0);
           }
           to {
            transform: translate(-750px);
        }
    }

Copy after login

5. Add mouse hover and animation pause effect

ul:hover {
            animation-play-state: paused;
        }

Copy after login

6. Finally add overflow:hidden to nav to hide the exceeded part, so that the whole set of scrolling picture bar It’s done

The overall code is as follows

<!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>

Copy after login

Rendering:

How to scroll images in css

The above is the detailed content of How to scroll images in css. For more information, please follow other related articles on the PHP Chinese website!