So erzielen Sie den Effekt des Schwenkens nach links und des Verschwindens in CSS3-CSS-Tutorial-php.cn

So erzielen Sie den Effekt des Schwenkens nach links und des Verschwindens in CSS3

WBOY

Freigeben： 2021-12-15 18:24:14

Original

3610 Leute haben es durchsucht

Methode: 1. Verwenden Sie die Anweisung „animation: name time“, um die Animation zum Verschwinden der linken Übersetzung an das Element zu binden. 2. Verwenden Sie „@keyframes name {100%{transform: translatorX (- translation distance); opacity: 0; }} "-Anweisung bewirkt, dass sich das Element nach links bewegt und verschwindet.

So erzielen Sie den Effekt des Schwenkens nach links und des Verschwindens in CSS3

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

So erzielen Sie den Effekt des Schwenkens nach links und des Verschwindens in CSS3

Wenn Sie in CSS den Effekt erzielen möchten, dass Elemente nach links schwenken und verschwinden, können Sie Animationsattribute und @keyframes-Regeln verwenden .

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.

Es gibt auch ein Transformationsattribut, mit dem die Bildschiebeaktion festgelegt wird. Die Transformationseigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

Es gibt auch das Opazitätsattribut, mit dem der transparente Stil des Elements festgelegt wird.

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>
.div1{
  width:100px;
  height:100px;
  background:pink;
  margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
  100%{transform:translateX(-200px);opacity:0;}
}
</style>
</head>
<body>
<div class="div1">这是一个向左平移消失的div</div>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So erzielen Sie den Effekt des Schwenkens nach links und des Verschwindens in CSS3

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt des Schwenkens nach links und des Verschwindens in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!