Erstellen Sie einen auffälligen Tasteneffekt mit rotierender Leuchtanimation

Haben Sie sich jemals gefragt, wie Websites diese auffälligen Schaltflächen mit leuchtenden, rotierenden Effekten erstellen? Diese Effekte können Benutzer fesseln und die UI/UX Ihrer Website verbessern. Lassen Sie uns Schritt für Schritt erkunden, wie Sie sie mit CSS und etwas JavaScript erstellen.

Schritt 1: Erstellen Sie das Schaltflächenlayout

Lassen Sie uns zunächst eine einfache Schaltfläche erstellen-

<button>WHY CHOOSE US</button>

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

Es wird so aussehen-

Schritt 2: Hinzufügen eines Verlaufseffekts

Lassen Sie uns nun über eine besondere Art von Farbverlauf sprechen, den sogenannten konischen Farbverlauf. Hast du davon gehört? Während lineare Farbverläufe die Farben entlang einer geraden Linie sanft übergehen und radiale Farbverläufe die Farben von der Mitte eines Kreises nach außen vermischen, übergehen konische Farbverläufe die Farben um einen zentralen Punkt herum und bilden ein kreisförmiges oder kegelförmiges Muster. Es ist eine einzigartige Möglichkeit, dynamische und optisch interessante Designs zu erstellen.

Sehen Sie den Unterschied unten-

Für diesen Effekt verwenden wir den konischen Farbverlauf. Fügen wir das zu unserem Button hinzu-

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

Das CSS-Snippet beinhaltet einen konischen Farbverlauf und verwendet eine Rahmenbox für die Hintergrundgröße. Hier ist eine Aufschlüsselung dessen, was passiert:

Konische Gradientenaufschlüsselung

konischer Farbverlauf (von 0, transparent, weiß 10 %, transparent 20 %):

von 0: Der Farbverlauf beginnt bei einem Winkel von 0 Grad (Oberkante des Kreises) und verläuft im Uhrzeigersinn.

transparent: Der Farbverlauf beginnt mit einer vollständig transparenten Farbe.

Weiß 10 %:Bei 10 % des gesamten Farbverlaufsumfangs geht die Farbe in Weiß über.

transparent 20 %:Bei 20 % des Farbverlaufsumfangs wechselt es wieder in transparent.

Dieses Muster erzeugt eine „Scheibe“ aus Weiß, umgeben von Transparenz.

Grenzfeld

border-box: Der Farbverlauf gilt für den Bereich, der den Inhalt, die Polsterung und den Rand des Elements enthält. Das bedeutet, dass der Farbverlauf die gesamte Box des Elements bis zum äußeren Rand des Rahmens abdeckt.

Nachdem dieser Effekt angewendet wurde, sieht die Schaltfläche wie folgt aus:

Jetzt verwenden wir diesen konischen Farbverlauf als Verlaufsrand der Schaltfläche. Wie können wir das tun?

Wir werden hier die Kraft der Box-Sizing nutzen. Wir werden mehrere Hintergründe für diese Schaltfläche erstellen. Der obere Hintergrund der Schaltfläche ist ein einfarbiger Hintergrund, der über eine Füllbox als Boxgröße verfügt, was bedeutet, dass er sich nicht bis zum Rand erstreckt. Siehe den Code unten –

<button>WHY CHOOSE US</button>

Jetzt haben wir also einen schwarzen Hintergrund, der die Schaltfläche einschließlich ihres Inhalts und ihrer Polsterung abdeckt. Der konische Farbverlauf, den wir zuvor hinzugefügt haben, erstreckt sich bis zum Rand. Da der Rand transparent ist, können wir die 2-Pixel-Dicke des konischen Farbverlaufs durch den Rand hindurch sehen. Jetzt sieht die Schaltfläche so aus:

Schritt 3: Animieren des Farbverlaufs

Wir haben unserem Button diesen glänzenden Leuchteffekt hinzugefügt! Jetzt lasst es uns bewegen. Dazu benötigen wir ein wenig JavaScript. Aber zuerst aktualisieren wir das CSS, um es flexibler und dynamischer zu machen.

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

Hier besteht der einzige Unterschied zum vorherigen Abschnitt darin, dass wir eine CSS-Variable namens --angle eingeführt haben. [von var(--angle, 0) bedeutet, dass, wenn der --angle-Wert nicht definiert ist, der Standardwert 0 ist, was derselbe wie zuvor war.] Und jetzt ändern wir diesen ---angle-Wert von 0 auf 360 von Javascript. Dadurch verschiebt sich der konische Farbverlauf von 0 auf 360 Grad und erzeugt den leuchtenden Rotationseffekt. Sehen wir uns jetzt den JavaScript-Teil an –

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

Sehr einfache Bedienung. Nachdem der DOM-Inhalt geladen ist, rufen wir eine Funktion namens „rotate()“ auf. Diese Funktion erhöht den Winkel bei jeder Iteration um 1 und setzt diesen Wert auf die CSS-Variable --angle der Schaltfläche. Das ändert schließlich die Stelle des konischen Gradienten. Wir rufen diese Funktion iterativ mithilfe einer integrierten Funktion namens requestAnimationFrame auf. Dies ist eine spezielle Javascript-Funktion wie setInterval oder setTimeOut. Lassen Sie uns ein wenig ins Detail dieser Funktion „requestAnimationFrame“ gehen –

Was es tut:
Sorgt für flüssige Animationen: Es synchronisiert Ihre Animationen mit der Bildwiederholfrequenz des Bildschirms (normalerweise 60 Bilder pro Sekunde), sodass sie nicht abgehackt aussehen.

Spart Strom: Es pausiert Animationen, wenn der Benutzer zu einer anderen Registerkarte wechselt, und spart so Ressourcen.

Ruft Ihre Funktion zum perfekten Zeitpunkt auf:Es teilt Ihrer Animationslogik mit, wann es Zeit für eine Aktualisierung ist, sodass alles synchron bleibt.

Wie es funktioniert:
Sie geben requestAnimationFrame eine aufzurufende Funktion (normalerweise Ihre Animationslogik). Diese Funktion wird ausgeführt, unmittelbar bevor der Browser den nächsten Frame auf dem Bildschirm zeichnet.

Und wir erhalten das Endergebnis. Sehen Sie sich den Codepen unten an, um Schritt-für-Schritt-Änderungen zu erhalten –

Jetzt haben Sie mit CSS und JavaScript eine leuchtende, rotierende Schaltfläche erstellt! Fühlen Sie sich frei, die Farbverläufe und die Animationsgeschwindigkeit zu optimieren (Haben Sie eine Idee, wie wir das machen können? Hinterlassen Sie es im Kommentar) oder fügen Sie sogar Ihre eigenen benutzerdefinierten Effekte hinzu. Diese Techniken sind eine großartige Möglichkeit, Ihre Benutzeroberfläche hervorzuheben.

Möchten Sie weitere Ideen für kreative Javascript-Animationen oder CSS-Button-Effekte? Lass es mich in den Kommentaren wissen und sei gespannt auf den nächsten Blogbeitrag!

Du findest mich auch hier-

X
LinkedIn

Das obige ist der detaillierte Inhalt vonErstellen Sie einen auffälligen Tasteneffekt mit rotierender Leuchtanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!