CSS to achieve scrolling image bar example code

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

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

First, given two sets of identical images (on the same row), move the entire image to the left by the length of one set of images.

In this way, it will quickly return to its original position when the animation ends, and at this time it will alternate with the second set of pictures, making it look like a set of pictures is scrolling to the left in a continuous cycle.

The specific steps are as follows:

1. Set two sets of the same pictures in each part of the main 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 width of a group of pictures added together, and the height is the height of the pictures.

        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 properties

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

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

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

5. Add the effect of mouse hover and animation pause

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

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

The overall code is as follows

<!DOCTYPE html>
<html lang="en">
<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="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>
</body>
</html>

Summarize

The above is the example code of the CSS scrolling image bar introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Docker port mapping and external inaccessibility issues

>>: Web design tips on form input boxes