Maison  >  Article  >  interface Web  >  Comment obtenir un effet d'animation de disparition d'image en CSS3

Comment obtenir un effet d'animation de disparition d'image en CSS3

青灯夜游
青灯夜游original
2022-03-18 16:19:474483parcourir

Méthode d'implémentation : utilisez la règle "@keyframes animation name {}" et l'instruction "opacity: transparent;" pour créer une animation de disparition d'image ; 2. Utilisez l'"élément d'image {opacity : 0 ; animation : animation name time 1 ; ;}" instruction pour L'animation de disparition d'image peut être appliquée à l'élément d'image.

Comment obtenir un effet d'animation de disparition d'image en CSS3

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

En CSS, vous pouvez utiliser l'attribut d'animation, la règle "@keyframes" et l'attribut d'opacité pour obtenir l'effet d'animation de disparition de l'image.

@keyframes est une règle de CSS3 qui peut être utilisée pour définir le comportement d'une période d'animation CSS et créer des animations simples.

Utilisez @keyframes pour définir l'action de votre animation ; puis, en utilisant différentes propriétés d'animation CSS, vous pouvez contrôler de nombreux aspects différents de l'animation, y compris le nombre d'itérations de l'animation, si elle alterne entre les valeurs de début et de fin, et si l'animation doit s'exécuter ou faire une pause. Les animations peuvent également retarder leur heure de début. La propriété

opacity contrôle la transparence d'un élément.

Code d'implémentation :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			@keyframes mymove {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}

			@-webkit-keyframes mymove{ /* Safari and Chrome */
			
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			img {
				opacity: 0;
				animation: mymove 3s 1;
				/* Safari and Chrome */
				-webkit-animation: mymove 3s 1;
			}
		</style>
	</head>
	<body>

		<img  src="img/1.jpg"    style="max-width:90%" / alt="Comment obtenir un effet d'animation de disparition d'image en CSS3" >

	</body>
</html>

Comment obtenir un effet danimation de disparition dimage en CSS3

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn