Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Elementanzeige und das Ausblenden von Animationseffekten in CSS

So implementieren Sie die Elementanzeige und das Ausblenden von Animationseffekten in CSS

WBOY
WBOYOriginal
2021-12-01 17:14:3013990Durchsuche

Methode: 1. Verwenden Sie das Animationsattribut, um die Animation an das Element zu binden. 2. Verwenden Sie die „Keyframes“-Regel, um die Animationsaktion zu steuern, um den Show-Hide-Effekt zu erzielen. Die Syntax lautet „@keyframes Animationsname {0%{“. opacity:1}50 %{opacity: 0}100 %{opacity:1}}".

So implementieren Sie die Elementanzeige und das Ausblenden von Animationseffekten in CSS

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

So erreichen Sie Elementanzeige und versteckte Animationseffekte in CSS

Wir können @keyframes-Regeln verwenden, um Elementrealität und versteckte Animationseffekte zu erreichen. Mit @keyframes-Regeln 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.

Die Syntax lautet:

@keyframes animationname {keyframes-selector {css-styles;}}

Wo:

So implementieren Sie die Elementanzeige und das Ausblenden von Animationseffekten in CSS

Das Beispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3显示隐藏效果</title>
<style>
.fadenum{
background-color: #ffce44;
width: 150px;
height: 150px;
animation:fadenum 3s infinite;
}
@keyframes fadenum{ /*设置内容由显示变为隐藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
</style>
</head>
<body>
<div class="fadenum"></div>
</body>
</html>

Ausgabeergebnis:

So implementieren Sie die Elementanzeige und das Ausblenden von Animationseffekten in CSS

(Teilen von Lernvideos: css-Video-Tutorial )

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Elementanzeige und das Ausblenden von Animationseffekten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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