Comment utiliser CSS pour implémenter une barre d'image défilante (avec code)

Le contenu de cet article explique comment utiliser CSS pour implémenter une barre d'images défilante (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Sur certains sites Web, vous pouvez souvent voir des images défiler en continu. Cet effet peut être obtenu grâce aux effets d'animation CSS. L'effet spécifique est le suivant

Le principe principal est de se déplacer vers la gauche grâce à l'animation.

Tout d'abord, donnez deux séries des mêmes images (sur la même ligne) et déplacez l'image globale vers la gauche de la longueur d'un groupe d'images

De cette façon, ce sera le cas. revient rapidement à sa position d'origine à la fin de l'animation. À ce moment-là, il alterne avec le deuxième groupe d'images. Il ressemble à un groupe d'images défilant vers la gauche en boucle continue.

Les étapes spécifiques sont les suivantes :

1. Définissez deux séries des mêmes images partout dans le code corporel

 <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, définissez la taille de la navigation, la largeur est la largeur combinée d'un groupe d'images et la hauteur est la hauteur de l'image.

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

3. Définissez la taille ul, la largeur est le double de celle de la navigation, la hauteur est la même que celle de la navigation et spécifiez les attributs liés à l'animation.

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

4. Définir une animation, en déplaçant principalement la longueur d'un groupe d'images vers la gauche

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

5. Ajoutez un survol de la souris et un effet de pause d'animation

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

6. Enfin, ajoutez un débordement : caché à la navigation afin que la partie dépassée soit masquée, de sorte que l'ensemble Un ensemble de barres d'images défilantes soit prêt

Le code global est le suivant

    
    
    
    
    



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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!