Verwenden Sie CSS, um ein Hover-Übergangsanimationsprojekt abzuschließen (super einfach)

CSS muss nicht komplex sein, um Spezialeffekte zu erzielen. Hier sind drei Beispiele für supereinfache Übergänge, die vielleicht nur ein paar Codezeilen umfassen, aber viel zu Ihrer Webanwendung hinzufügen.

Unten ist der Code, den wir in diesem Tutorial erstellen werden

Projekteinstellungen

In diesem Projekt haben wir wendet den Übergangseffekt auf ein Element mit Klassenfeld an. Innerhalb dieses Boxelements befindet sich vertikal und horizontal zentrierter Textinhalt. Die HTML-Struktur ist ziemlich einfach:

<div class=&#39;box&#39;>
  <p>TEXT</p>
</div>

Der CSS-Code ist genauso einfach. Wir möchten eine serifenlose Schriftart verwenden und sicherstellen, dass der Absatztext im div weiß ist. Dies kann mit dem folgenden Code erreicht werden:

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}

Fügen Sie außerdem das folgende CSS-Attribut zum Box-Element hinzu:

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */
  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}

Ob Sie mit den Übergangseigenschaften von CSS vertraut sind oder nicht, wir stellen sie Ihnen hier kurz vor, unterteilt in drei Schritte. .Im ersten Schritt müssen wir es auf alle geänderten Eigenschaften anwenden. Stellen Sie als Nächstes die Übergangsdauer auf 0,25 Sekunden ein. Wählen Sie abschließend die Animationsfunktion als Leichtigkeit aus. Der Leistungszustand der Leichtigkeit besteht darin, dass der Start- und Endvorgang relativ langsam ist und der Übergang in der Mitte schnell erfolgt.

holly high! Die Vorbereitungen sind nun fertig, der nächste Schritt besteht darin, den Übergangseffekt hinzuzufügen. Bisher sollte das Div so aussehen.

1. Fade-Effekt

Fügen Sie zunächst einen Fade-Übergang hinzu. Erstellen Sie ein neues div-Element und fügen Sie ihm eine Klasse namens fade hinzu:

<div class=&#39;box fade&#39;>
  <p>FADE HERE</p>
</div>

Als nächstes müssen wir die Hover-Regeln für diese Fade-Klasse angeben. Um dies zu erreichen, müssen wir die CSS-Pseudoklasse selector:hover verwenden. Dieser Pseudo-Selektor ist für alle Elemente gültig und aktiviert die CSS-Deklaration, wenn der Mauszeiger über das Element bewegt wird. Auf dieser Grundlage verwenden wir den :hover-Selektor, um die Transparenz des Div auf 0,5 zu ändern:

.fade:hover {
  opacity: 0.5;
}

Einfach. Die obige CSS-Anweisung gibt einen Hover-Effekt für das Div an. So sieht es aktuell aus. Der Grund, warum Sie den Übergangsstil sehen können, liegt darin, dass wir ursprünglich die Deklaration „transition:all 0.25s“ in der Klasse „box“ verwendet haben. Schauen Sie unten, ob es ein ziemlich guter Fade-Effekt ist:

2. Schauen wir uns einige Farben an

Geben Sie einen Farbübergang an Tatsächlich ähnelt es dem Prozess des verblassenden Übergangs. Erstellen Sie zunächst ein div-Element und fügen Sie ihm eine Klasse namens color hinzu.

<div class=&#39;box color&#39;>
  <p>COLOR HERE</p>
</div>

Ähnlich müssen wir auch den :hover-Selektor verwenden, um dies zu erreichen, aber dieses Mal ändern wir nicht die Transparenz, sondern die Hintergrundfarbe:

.color:hover {
  background: #FF5722;
}

Das Folgende ist die tatsächliche Wirkung:

3. Gemeinsam schwingen

Als nächstes einen schwingenden Effekt erzielen. Dieser Effekt ist etwas komplexer zu implementieren als die beiden vorherigen Beispiele. In diesem Beispiel verwende ich @keyframes.

@keyframes – Gibt Ihnen die Magie, Zwischenschritte in einer CSS-Animationssequenz zu steuern.

Das Erste ist das Gleiche, Sie müssen es satt haben, das zu hören, erstellen Sie ein div-Element und fügen Sie eine Klasse namens wiggle hinzu:

<div class=&#39;box wiggle&#39;>
  <p>WIGGLE WIGGLE</p>
</div>

Als nächstes müssen wir Folgendes tun Verwenden Sie @-Keyframes, um Animationen zu erstellen. Geben wir der Animation zunächst einen Namen, nennen wir sie Wackeln. Und fügen Sie die Implementierung des Jitter-Effekts im folgenden Code hinzu:

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}

Wie aus dem obigen Code ersichtlich ist, gibt uns @keyframes die Möglichkeit, die Animation in einzelne Schritte zu unterteilen und genau zu definieren, was bei jedem Schritt passiert . Geben Sie den Fortschritt der Animation in Prozent an:

20 % – das Div bewegt sich relativ zu seiner Anfangsposition um 4 Pixel nach rechts.

40 % – das Div wird relativ zu seiner Anfangsposition um 4 Pixel nach links verschoben.

60 % – das Div wird relativ zu seiner Anfangsposition um 2 Pixel nach rechts verschoben.

80 % – das Div wird relativ zu seiner Anfangsposition um 1 Pixel nach links verschoben.

100 % – das Div kehrt zu seiner ursprünglichen Position zurück.

Jetzt können wir den :hover-Selektor verwenden, um die Wackelanimation anzuzeigen:

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

Wir stellen die Animation auf Wackeln ein. Gleichzeitig möchten wir, dass die Animation 1 Sekunde dauert und den Ease-Animationseffekt verwenden.

Legen Sie schließlich die Animation fest, die jedes Mal ausgelöst werden soll, wenn sich der Mauszeiger darüber bewegt.

Das Bild unten ist der endgültige Animationseffekt:

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um ein Hover-Übergangsanimationsprojekt abzuschließen (super einfach). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!