Maison >interface Web >tutoriel CSS >Comment faire défiler les images en CSS
Comment faire défiler les images en CSS
- 藏色散人original
- 2021-01-28 10:41:128615parcourir
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.
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>
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;
}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;
}4. un groupe d'images sur la longueur gauche
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}5. Ajoutez un survol de la souris, un effet de pause d'animation
ul:hover {
animation-play-state: paused;
}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>Rendu :
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!