Heim > Artikel > Web-Frontend > So erzielen Sie den Einblendeffekt von Webseiten in CSS3

So erzielen Sie den Einblendeffekt von Webseiten in CSS3

WBOYOriginal: 2021-12-21 17:12:192755Durchsuche

Methode: 1. Verwenden Sie die Anweisung „body{animation: name time}“, um die Animation an den Körper des Webseitenelements zu binden. 2. Verwenden Sie zum Festlegen die Anweisung „@keyframes name {0%{opacity:0;}}“. Die Animation für die Webseite wird im Keyframe eingeblendet. Mit dem Opazitätsattribut wird die Transparenz des Elements festgelegt.

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

So erzielen Sie den Einblendeffekt einer Webseite in CSS3

In CSS können Sie das Animationsattribut und die @keyframes-Regel verwenden, um den Animationseffekt der Änderung der Breite des Elements zu erzielen Mit der @keyframes-Regel können Sie Animationen erstellen.

Das Prinzip beim Erstellen von Animationen besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln. Sie können diesen Satz von CSS-Stilen während der Animation mehrmals ändern.

Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.

Verwenden Sie das Opazitätsattribut, um die Animationsaktion festzulegen. Mit dieser Eigenschaft wird die Transparenz eines Elements festgelegt. Das Syntaxformat des

animation-Attributs lautet wie folgt:

animation: name duration timing-function delay iteration-count direction;

Das Beispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
<style>
body{
animation:fadenum 10s;
}
@keyframes fadenum{
   0%{opacity: 0;}
}
</style>
</head>
<body>
<img  src="1118.02.png" alt="So erzielen Sie den Einblendeffekt von Webseiten in CSS3" >
网页元素
</body>
</html>

Ausgabeergebnis:

So erzielen Sie den Einblendeffekt von Webseiten in CSS3

(Freigabe von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Einblendeffekt von Webseiten in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 选择器 animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist die Verwendung von Transition in CSS3?Nächster Artikel：Was ist die Verwendung von Transition in CSS3?

In Verbindung stehende Artikel

Mehr sehen