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

This article will introduce to you how to implement a scrolling picture bar with CSS (code example). 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 main body code

 <nav>
        <ul>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/1 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/2 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/3 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/1 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/2 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/3 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
        </ul>
    </nav>

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

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

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);
            }
        }

5. Add mouse hover and animation pause effect

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

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

nbsp;html>
    
    
    
    
    
    <nav>
        <ul>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/1 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/2 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/3 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/1 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/2 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="Images/3 (2).jpg" class="lazy" alt="How to implement a scrolling picture bar with CSS (code example)" ></li>
        </ul>
    </nav>

Summary: The above is the entire content of this article, I hope it will be helpful to everyone’s study. For more related tutorials, please visit CSS basic video tutorial , CSS3 video tutorial !

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