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!