CSS3-Bézierkurven-Beispiel: Erstellen von Link-Hover-Animationseffekten

Wir verwenden animierte CSS3-Übergänge, um einen einfachen, aber attraktiven Link-Hover-Effekt zu erstellen, der ein kleines Popup erscheinen lässt, wenn Sie mit der Maus über den Link fahren.

Wir werden uns auch die kubischen Bézierkurven von CSS3 ansehen. Dabei handelt es sich um CSS-Übergänge, die Popups eine flüssigere statt einer starren, mechanischen Bewegung verleihen.

Dies ist unser Endergebnis:

Lasst uns anfangen!

HTML-Teil

Dies ist das HTML für unseren Link, die Symbole stammen von iconfont.cn.

<div Klasse="Container">
  <Abschnitt>
    <a href="#">
      <i class="fab fa-instagram"></i>
      Instagram
    </a>
    <a href="#">
      <i class="fab fa-github"></i>
      Github
    </a>
  </Abschnitt>
</div>

Das Span-Tag wird als Popup angezeigt, wenn Sie mit der Maus über den Link fahren. Als nächstes gehen wir zu CSS über.

CSS-Stile und Animationen

Wir zentrieren den Div-Container, sodass beide Links auf dem Bildschirm zentriert sind. Auf diese Weise können auch ganz einfach kleine Popups animiert werden, da diese oben im Link angezeigt werden.

div.container {
  Anzeige: Inline-Block;
  Position: absolut;
  oben: 50 %;
  links: 50%;
  -ms-transform: übersetzen(-50 %, -50 %);
  -webkit-transform: übersetzen(-50 %, -50 %);
  transformieren: übersetzen(-50 %, -50 %);
}

Als Nächstes gestalten wir die Links, erstellen einen einfachen Hover-Effekt im Hintergrund und positionieren die Social-Media-Symbole.

A {
  Farbe: #fff;
  Hintergrund: #8a938b;
  Rahmenradius: 4px;
  Textausrichtung: zentriert;
  Textdekoration: keine;
  Position: relativ;
  Anzeige: Inline-Block;
  Breite: 120px;
  Höhe: 100px;
  Polsterung oben: 12px;
  Rand: 0 2px;
  -o-Übergang: alle 0,5 s;
  -webkit-Übergang: alle 0,5 s;
  -moz-Übergang: alle 0,5 s;
  Übergang: alle 0,5 s;
  -webkit-font-smoothing: Kantenglättung;
}
ein:schweben {
  Hintergrund: #5a665e;
}
ich {
  Schriftgröße: 45px;
  vertikale Ausrichtung: Mitte;
  Anzeige: Inline-Block;
  Position: relativ;
  oben: 20 %;
}

Als Nächstes gestalten und animieren wir den Popup-Text.

eine Spanne {
  Farbe: #666;
  Position: absolut;
  Schriftfamilie: „Chelsea Market“, kursiv;
  unten: 0;
  links: -15px;
  rechts: -15px;
  Polsterung: 15px 7px;
  z-Index: -1;
  Schriftgröße: 14px;
  Rahmenradius: 5px;
  Hintergrund: #fff;
  Sichtbarkeit: versteckt;
  Deckkraft: 0;
  -o-Übergang: alle 0,5 s kubisch-bézier (0,68, -0,55, 0,265, 1,55);
  -webkit-transition: alle 0,5 s kubisch-bezier (0,68, -0,55, 0,265, 1,55);
  -moz-Übergang: alle 0,5 s kubisch-bezier (0,68, -0,55, 0,265, 1,55);
  Übergang: alle 0,5 s kubisch-bézier (0,68, -0,55, 0,265, 1,55);
} /* Wenn das Symbol darüber schwebt, wird der Text eingeblendet */
a:hover span {
  unten: 130px;
  Sichtbarkeit: sichtbar;
  Deckkraft: 1;
}

Eine kubische Bézier-Kurve in CSS3 wird durch vier Punkte p0, p1, p2 und p3 definiert. Der Punkt p0 ist der Startpunkt der Kurve und der Punkt p3 ist der Endpunkt der Kurve. Je linearer die Kurve, desto steifer (oder weniger fließend) die Bewegung.

Wenn ein Punkt zunächst positiv und der nächste Punkt negativ ist, ist die Bewegung zunächst langsam. Wenn der Punktwert höher wird als der vorherige Punktwert, beschleunigt sich die Bewegung.

Dies ist die Bedeutung von kubischen Bézier-Punkten in CSS. Da die Animation kurz ist, sind die Bewegungen subtil. Das Popup startet langsam am unteren Rand des Quadrats und wird dann nach oben hin immer schneller.

Obwohl Sie Animationen ohne kubisch-Bézier-Kurvenübergänge erstellen können, bestehen in den Animationen folgende Unterschiede:

Animation mit kubisch-bezierschen Kurvenübergang

Keine Animation für den Übergang zwischen kubisch-bézierscher Kurve

Wie Sie sehen, verleiht die Animation dem Hover-Effekt Leben.

Der letzte CSS-Satz beinhaltet die Formatierung des kleinen Pfeils unten im Popup. Weitere Informationen zum Erstellen von Dreiecken in CSS finden Sie in diesem Artikel zu CSS-Tricks.

Zusammenfassen

Wir haben einen minimalistischen Link im Button-Stil erstellt. Die Links haben einen grundlegenden Hover-Effekt im Hintergrund, aber dabei ist es noch nicht geblieben. Wir haben ein kleines Popup-Fenster hinzugefügt, um den Text des Links anzuzeigen. Mithilfe von kubischen Bézierkurven in CSS3 ist die Animation flüssig und angenehm.

Diese Art von Wissen kann beim Design Ihrer Website, auf der Ihre Social-Media-Konten angezeigt werden, sehr nützlich sein.

Die Beispieldemonstration und den vollständigen Code dieses Artikels finden Sie unter der folgenden Adresse. Es wird empfohlen, https://coding.zhanbing.site auf dem PC zu öffnen.

Oben sind die Details eines CSS3-Bézierkurvenbeispiels: Erstellen eines Link-Hover-Animationseffekts. Weitere Informationen zur CSS3-Bézierkurve finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!