Comment utiliser CSS pour obtenir une commutation de carrousel transparente ?

Comment réaliser un changement de carrousel fluide avec CSS : utilisez d'abord l'attribut d'animation pour définir le nom des images clés à lier au sélecteur, le temps nécessaire pour terminer l'animation, la courbe de vitesse de l'animation, et le nombre de fois que l'animation est jouée ; utilisez ensuite la règle @keyframes pour créer une animation carrousel et spécifiez le style de positionnement de l'image dans chaque image clé.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

(Tutoriel recommandé : Tutoriel vidéo CSS)

Utilisation de l'implémentation CSS3 : utilisation de l'attribut d'animation + règle @keyframes

( Pour réaliser un carrousel un par un, une seule image est visible à l'oeil nu)

La partie HTML est relativement simple, avec plusieurs balises img enroulées sous les deux divs afin de réaliser un carrousel homogène, payez ; attention à la première image Elle devrait être la même que la dernière image ;

<div class="out">
	<div class="imgs">
		<img  src="img/beatuy.jpg"/ alt="Comment utiliser CSS pour obtenir une commutation de carrousel transparente ?" >
		<img  src="img/child.jpg"/ alt="Comment utiliser CSS pour obtenir une commutation de carrousel transparente ?" >
		<img  src="img/girl.jpg"/ alt="Comment utiliser CSS pour obtenir une commutation de carrousel transparente ?" >
		<img  src="img/milk.jpg"/ alt="Comment utiliser CSS pour obtenir une commutation de carrousel transparente ?" >
		<img  src="img/cup.jpg"/ alt="Comment utiliser CSS pour obtenir une commutation de carrousel transparente ?" >
		<img  src="img/dog.jpg"/ alt="Comment utiliser CSS pour obtenir une commutation de carrousel transparente ?" >
		<img  src="img/beatuy.jpg"/ alt="Comment utiliser CSS pour obtenir une commutation de carrousel transparente ?" >
	</div>
</div>

Le div le plus externe est défini avec ovflow: Hidden; position: relative ; div doit être défini avec position: absolue; pour que son mouvement soit relatif à l'élément parent

Le code CSS est le suivant :

.out{
	width: 200px;
	height: 100px;
	overflow: hidden;
	position: relative;
}

.imgs {
	width: 1400px;
	height: 100px;
	position: absolute;
	animation: ppt 10s linear infinite;
}

img {
	float: left;
	width: 200px;
	height: 100px;
}

@keyframes ppt {
	0% {
		left: 0px
	}
	20% {
		left: -250px
	}
	40% {
		left: -500px
	}
	60% {
		left: -750px
	}
	80% {
		left: -1000px
	}
	100% {
		left: -1200px
	}
}

De cette façon, l'image peut être tournée.

Mais l'image tourne toujours lorsque la souris est placée dessus. Si nous voulons que le carrousel s'arrête ou que certaines informations apparaissent lorsque la souris est placée sur l'image, nous Il faut ajouter : survoler ; pour définir le statut de l'animation, le code est très simple : comme suit

.out:hover .imgs{
   animation-play-state:paused;
}

De cette façon notre effet carrousel sortira

Plus Pour des connaissances liées à la programmation, veuillez visiter :

Apprendre la programmation ! !

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!