Comment faire défiler les images en CSS-tutoriel CSS-php.cn

Comment faire défiler les images en CSS

藏色散人

Libérer： 2022-12-30 11:12:52

original

8584 Les gens l'ont consulté

Comment faire défiler les images en CSS : définissez d'abord deux images identiques dans chaque partie du code du corps principal ; puis définissez la taille de navigation et la taille ul ; puis définissez l'animation et ajoutez l'effet de survol et d'animation de la souris ; pause ; enfin donnez. Ajoutez simplement "overflow:hidden" à la navigation pour masquer la partie excédentaire.

Comment faire défiler les images en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3.

Recommandé : Tutoriel vidéo CSS

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 de l'ensemble des images.

De cette façon, il reviendra rapidement à la position d'origine à la fin de l'animation, et il alternera avec la deuxième série d'images à ce moment-là. Cela ressemblera à une série d'images défilant vers le haut. laissé dans une boucle continue.

Les étapes spécifiques sont les suivantes :

1. Définissez deux ensembles des mêmes images partout dans le code du corps principal

<nav>
  <ul>
<li>
  <img src="image/1.jpg" alt=""></li>
<li>
  <img src="image/2.jpg" alt=""></li>
<li>
  <img src="image/3.jpg" alt=""></li>
<li>
  <img src="image/4.jpg" alt=""></li>
<li>
  <img src="image/5.jpg" alt=""></li>
<li>
  <img src="image/6.jpg" alt=""></li>
  </ul>
</nav>

Copier après la connexion

2. la largeur est la somme d'un groupe d'images. La largeur et la hauteur sont la hauteur de l'image.

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

Copier après la connexion

3. Définissez la taille de l'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;
        }

Copier après la connexion

4. un groupe d'images sur la longueur gauche

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

Copier après la connexion

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

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

Copier après la connexion

6. Enfin, ajoutez overflow : caché à la navigation pour masquer la partie en excès, de sorte que le ensemble complet de barre d'images défilante C'est fait

Le code global est le suivant

<!DOCTYPE html>
<html>
<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="image/1.jpg" alt=""></li>
            <li><img src="image/2.jpg" alt=""></li>
            <li><img src="image/3.jpg" alt=""></li>
            <li><img src="image/4.jpg" alt=""></li>
            <li><img src="image/5.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
        </ul>
    </nav>
</body>
</html>

Copier après la connexion

Rendu :

Comment faire défiler les images en CSS