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

Implementing form submission without refreshing the page based on HTML

CSS to achieve scrolling image bar example code

Implementing form submission without refreshing the page based on HTML

Detailed tutorial for installing ElasticSearch:7.8.0 cluster with docker

Centos7 startup process and Nginx startup configuration in Systemd

How to deploy Angular project using Docker

Summary of various postures of MySQL privilege escalation

Detailed explanation of the use of MySQL comparison operator regular expression matching REGEXP

Detailed installation and use of docker-compose

Use nginx + secondary domain name + https support

Related commands to completely uninstall nginx under ubuntu16.04

Analysis of multi-threaded programming examples under Linux

Recommend

HTML hyperlinks explained in detail

Implementation of adding visit count function in github+Jekyll blog in one minute with JS

Linux forced release of occupied ports and Linux firewall port opening method detailed explanation

How to start and stop SpringBoot jar program deployment shell script in Linux

How to use negative margin technology to achieve average layout in CSS

MySQL msi installation tutorial under windows10 with pictures and text

What are the advantages of MySQL MGR?

MySQL 8.0.12 installation graphic tutorial

JavaScript to implement the function of changing avatar

Dynamically edit data in Layui table row

vue+echarts realizes the flow effect of China map (detailed steps)

Detailed Tutorial on Installing MySQL 5.7 on RedHat 6.5

Detailed explanation of several solutions for JavaScript interruption requests

Solve the problem of installing Theano on Ubuntu 19

Implementation of one-click TLS encryption for docker remote api