How to use CSS to implement a scrolling picture bar (with code)

The content of this article is about how to use CSS to implement a scrolling picture bar (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

On some websites, you can often see some pictures scrolling continuously. This effect can be achieved through CSS animation effects. The specific effect is as follows

#The main principle is to move to the left through animation.

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 group of pictures.

This way it will quickly return to its original position when the animation ends. At this time, it happens to alternate with the second group of pictures. It looks like a group 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 body code

 <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. Set The size of nav, the width is the combined width of a group of pictures, and the height is the height of the picture.

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

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

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

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

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

5. Add mouse hover Stop, the animation pause effect

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

6. Finally, add overflow:hidden to nav to hide the excess part, so that the entire set of scrolling picture bars is done Okay

The overall code is as follows

    
    
    
    
    



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

The above is the detailed content of How to use CSS to implement a scrolling picture bar (with code). For more information, please follow other related articles on the PHP Chinese website!