Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie mit CSS den Effekt, dass das Bild verschwindet, nachdem es eine Sekunde lang angezeigt wurde
So erzielen Sie mit CSS den Effekt, dass das Bild verschwindet, nachdem es eine Sekunde lang angezeigt wurde
- WBOYOriginal
- 2021-12-14 11:00:224141Durchsuche
In CSS können Sie dem Bild „Bildelement {animation: name time}@keyframes name {0%{opacity:1;}99%{opacity:1;}100%{opacity:0;}}“ hinzufügen Element Style, um den Effekt zu erzielen, dass das Bild eine Sekunde lang erscheint und dann verschwindet.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie den Effekt, dass das Bild verschwindet, nachdem es eine Sekunde lang in CSS angezeigt wurde.
In CSS können Sie das Animationsattribut und die @keyframes-Regel verwenden, um den Effekt zu erzielen, dass das Bild verschwindet, nachdem es eine Sekunde lang angezeigt wurde . 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.
Steuern Sie den Stil des Bildverschwindens mithilfe des Deckkraftattributs.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<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>
img{
opacity:0;
animation:fadenum 3s;
}
@keyframes fadenum{
0%{opacity:1;}
99%{opacity:1;}
100%{opacity:0;}
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS den Effekt, dass das Bild verschwindet, nachdem es eine Sekunde lang angezeigt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!