Comment implémenter une barre d'image défilante avec CSS (exemple de code)

Cet article vous présentera comment implémenter une barre d'images défilante avec CSS (exemple de 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 du corps principal

 <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. nav, et la largeur est la même qu'un groupe d'images. La largeur et la hauteur ajoutées correspondent à 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 nav, la hauteur est la même que celle de nav et spécifiez les attributs liés à l'animation

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

4. animation, principalement vers la gauche Déplacer la longueur d'un groupe d'images

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

5. Ajouter le survol de la souris, effet de pause d'animation

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

6. Enfin ajouter un débordement : caché à la navigation. pour masquer la partie excédentaire. De cette façon, un ensemble de colonnes d'images défilantes est 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>

Résumé : ce qui précède représente l'intégralité du contenu de cet article. , J'espère que cela sera utile à l'étude de tout le monde. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo sur les bases CSS , Tutoriel vidéo CSS3  !

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!