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

Autotrash tool for Linux to automatically delete old junk files at a scheduled time

CSS to achieve scrolling image bar example code

Autotrash tool for Linux to automatically delete old junk files at a scheduled time

Docker uses root to enter the container

Vue Element UI custom description list component

An Incomplete Guide to JavaScript Toolchain

Steps to export the fields and related attributes of MySQL tables

Detailed explanation of Vue's seven value transfer methods

Steps for restoring a single MySQL table

How to check disk usage in Linux

Using MySQL database in docker to achieve LAN access

Detailed steps for installing the decompressed version of MySQL 5.7.20 (two methods)

Recommend

How to implement the jQuery carousel function

Vue+Openlayer realizes the dragging and rotation deformation effect of graphics

Detailed explanation of the 4 ways to import CSS files: inline, inline, external, and imported

CSS realizes corner cutting + border + projection + content background color gradient effect

MySQL 5.7.21 installation and configuration tutorial

Vue.js cloud storage realizes image upload function

A brief discussion on JavaScript throttling and anti-shake

Turn web pages into black and white (compatible with Google, Firefox, IE and other browsers)

7 useful new TypeScript features

HTML css js implements Tab page sample code

Analysis of the project process in idea packaging and uploading to cloud service

Share CSS writing standards and order [recommended for everyone to use]

Some thoughts and experience sharing on web page (website) design and production

Research on Web Page Size

Summary of webpack's mobile adaptation solution