So erzielen Sie einen Animationseffekt zum Verschwinden von Bildern in CSS3-Front-End-Fragen und Antworten-php.cn

So erzielen Sie einen Animationseffekt zum Verschwinden von Bildern in CSS3

青灯夜游

Freigeben： 2022-03-18 16:19:47

Original

4590 Leute haben es durchsucht

Implementierungsmethode: Verwenden Sie die Regel „@keyframes Animationsname {}“ und die Anweisung „Opacity: Transparency;“, um eine Bildverschwindensanimation 2 zu erstellen. Verwenden Sie die Regel „Picture Element {Opacity: 0; Animation: Animationsname Zeit 1“. ;}"-Anweisung für die Animation zum Verschwinden des Bildes kann auf das Bildelement angewendet werden.

So erzielen Sie einen Animationseffekt zum Verschwinden von Bildern in CSS3

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie das Animationsattribut, die „@keyframes“-Regel und das Deckkraftattribut verwenden, um den Animationseffekt „Bild verschwinden“ zu erzielen.

@keyframes ist eine CSS3-Regel, mit der das Verhalten eines Zeitraums von CSS-Animationen definiert und einfache Animationen erstellt werden können.

Verwenden Sie @keyframes, um die Aktion Ihrer Animation zu definieren. Anschließend können Sie mithilfe verschiedener CSS-Animationseigenschaften viele verschiedene Aspekte der Animation steuern, einschließlich der Anzahl der Iterationen der Animation, ob sie zwischen Start- und Endwerten wechselt und ob Die Animation sollte ausgeführt oder angehalten werden. Animationen können auch ihre Startzeit verzögern. Die Eigenschaft

opacity steuert die Transparenz eines Elements.

Implementierungscode:

<!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="So erzielen Sie einen Animationseffekt zum Verschwinden von Bildern in CSS3" >

	</body>
</html>

Nach dem Login kopieren

So erzielen Sie einen Animationseffekt zum Verschwinden von Bildern in CSS3

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Animationseffekt zum Verschwinden von Bildern in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!