CSS zum Erzielen eines dynamischen Schaltflächeneffekts mit Partikeln

Ursprünglicher Link

https://github.com/XboxYan/no…

Ein Button ist wahrscheinlich eines der häufigsten Elemente einer Webseite. Die meisten davon sind unauffällig. Wenn Sie auf einen solchen Button stoßen, wären Sie versucht, noch ein paar Mal darauf zu klicken?

Normalerweise ist die erste Reaktion auf diese Art von Effekt die Verwendung canvas , wie im folgenden Fall

Der Effekt ist noch schockierender. Natürlich hat die canvas -Implementierung auch einen gewissen Schwellenwert und ist in der Praxis etwas problematisch (ein häufiges Problem aller js Implementierungen). Hier versuchen wir CSS Implementierungsmethode.

Partikel erzeugen

Neben der js -Lösung gibt es auch HTML und CSS Implementierungen. Es ist unnötig zu sagen, dass HTML einfach nur aus einer Menge Tags besteht.

<Schaltfläche>
    Taste
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</button>

Generell gefällt mir dieser Ansatz nicht besonders. Er hat zu viele Tags, die Struktur ist nicht schön und er kann andere Auswirkungen auf bestehende Seiten haben (in vielen Fällen ist es nicht praktisch, die ursprüngliche HTML Struktur zu ändern).

Schauen wir uns dann die CSS Implementierungsmethode an. Es gibt zwei Hauptmethoden. Eigentlich geht es nur darum, darüber nachzudenken, welche Attribute unendlich überlagert werden können. Eines ist box-shadow und das andere background-image (CSS3 unterstützt unendliche Überlagerung).

1.Box-Schatten

Schauen wir uns zunächst box-shadow -Methode an. Um die Verwendung zusätzlicher Tags zu vermeiden, werden hier Pseudoelemente verwendet.

.button::vor{
  Position: absolut;
  Inhalt: '';
  Breite: 5px;
  Höhe: 5px;
  Randradius: 50 %;
  Hintergrundfarbe: #ff0081;
  Box-Shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*Unendliche Überlagerung*/
}

Es gibt einige Auswirkungen, das Debuggen dauert nur länger. Position und Größe der Partikel werden hauptsächlich durch den Versatz und die Ausdehnung bestimmt.

Der Versatz kann hier jedoch nur in px Einheiten angegeben werden, was sich nicht gut an die Größe der Schaltfläche anpassen lässt. Daher wird hier die zweite Methode verwendet, um

2. Hintergrundbild

In CSS3 kann background-image unendlich überlagert werden, ähnlich wie

.meineKlasse {
  Hintergrund: Hintergrund1, Hintergrund2, /*...*/ HintergrundN;
}

Hier können wir radial-gradient verwenden, um mehrere kleine Punkte zu erzielen.

.button::vor{
  Position: absolut;
  Inhalt: '';
  links: -2em;
  rechts: -2em;
  oben: -2em;
  unten: -2em;
  Zeigerereignisse: keine;
  Hintergrundwiederholung: keine Wiederholung;
  Hintergrundbild: radialer Farbverlauf (Kreis, #ff0081 20 %, transparent 0), 
  radial-gradient(Kreis, #ff0081 20%, transparent 0),
  radial-gradient(Kreis, #ff0081 20%, transparent 0), 
  radial-gradient(Kreis, #ff0081 20%, transparent 0), 
  ...;
  Hintergrundgröße: 10 % 10 %, 20 % 20 %, 15 % 15 %, …;
  Hintergrundposition: 18 % 40 %, 20 % 31 %, 30 % 30 %, …;
}

Hier werden background-size und background-position hauptsächlich verwendet, um die Größe und Position des Ursprungs zu steuern. Das scheint kompliziert, aber in Wirklichkeit ist alles in Ordnung, solange background-size und background-position nacheinander background-image entsprechen. Das Debuggen kann in der tatsächlichen Entwicklung etwas schwierig sein. Sie können den Echtzeitvorschaueffekt direkt in der Konsole mithilfe der Auf-, Ab-, Links- und Rechtstasten auf der Tastatur optimieren (Sie können die Erstellung eines Visualisierungstools in Betracht ziehen).

Dadurch entsteht ein einfacher Partikeleffekt.

Bewegen Sie sich

Obwohl background-image keine CSS Animation unterstützt, tun dies die anderen beiden background-size und background-position , sodass CSS transition und CSS animation verwendet werden können.

Der Animationseffekt ist sehr einfach: Die Partikel breiten sich vom Zentrum aus nach außen aus und verschwinden allmählich.

Übergang

Schauen wir uns zunächst die :hover -Interaktion an

.button::vor{
  Übergang: 0,75 s Hintergrundposition, 75 s Hintergrundgröße,
}
.button:hover::vorher{
  Hintergrundposition: 5 % 44 %, -5 % 20 %, 7 % 5 % …;
  Hintergrundgröße: 0 % 0 %;
}

Natürlich ist es definitiv nicht ideal, es direkt so einzustellen. Wenn die Maus geht, schrumpft sie wieder. Der Effekt ist wie folgt

Wir möchten, dass die Maus beim Weggehen nicht zurückschreckt. Wie können wir das erreichen?

Das ist ganz einfach. Stellen Sie transition einfach unter :hover . Das bedeutet, dass der Übergang nur erfolgt, wenn die Maus darüber fährt, und nicht, wenn sie es verlässt.

.button:hover::vorher{
  Hintergrundposition: 5 % 44 %, -5 % 20 %, 7 % 5 % …;
  Hintergrundgröße: 0 % 0 %;
  Übergang: 0,75 s Hintergrundposition, 75 s Hintergrundgröße,
}

Fühlt sich das ein bisschen besser an? Klicken Sie hier, um es anzuzeigen.

Was müssen wir tun, wenn beim Klicken eine Partikelanimation erscheinen soll? Hier müssen wir die Pseudoklasse :active verwenden.

Wenn wir der :hover -Logik folgen, dann

.button:aktiv::vor{
  Hintergrundposition: 5 % 44 %, -5 % 20 %, 7 % 5 % …;
  Hintergrundgröße: 0 % 0 %;
  Übergang: 0,75 s Hintergrundposition, 75 s Hintergrundgröße,
}

Leider kann es nur ausgelöst werden, wenn die Taste gedrückt wird. Sobald die Maus angehoben wird, verschwindet es. Zu diesem Zeitpunkt müssen wir den Winkel ändern. Sie können es sich so vorstellen: Die Standardeinstellung ist divergierend. Wenn Sie darauf klicken, konvergiert es und wenn Sie es anheben, wird es in den vorherigen divergierenden Zustand zurückversetzt. Gleichzeitig müssen Sie den Übergangseffekt wie folgt abbrechen, wenn Sie darauf klicken

.button::vor {
    /*…*/
    Hintergrundposition: 5 % 44 %...;/*Diffusionszustand*/
    Hintergrundgröße: 0 % 0 %;
    Übergang: Hintergrundposition 0,5 s Ein-/Ausblenden, Hintergrundgröße 0,75 s Ein-/Ausblenden;
}

.button:aktiv::vor {
  Übergang:0s;/**Hinweis zum Abbrechen des Übergangs**/
  Hintergrundgröße: 10 % 10 %, 20 % 20 % …;
  Hintergrundposition: 18 % 40 %, 20 % 31 %, …;
}

Sie können sich diese Demo ansehen

Warum brauchen wir transition:0s in :active ? Sie können es ohne Hinzufügen ausprobieren und Sie werden die Wirkung wie folgt verstehen

Animation

Die Implementierungsprinzipien von animation und transition sind ähnlich. Der Vorteil besteht darin, dass anspruchsvollere Animationen erstellt werden können. Nehmen wir als Beispiel :active .

.button::vor{
  /*…*/
  Animation: Blasen gleiten 0,75 Sekunden vorwärts und verschwinden wieder;
}
.button:aktiv::vor {
  Animation: keine; /*Beachten Sie, dass die Animation hier abgebrochen werden kann*/
  Hintergrundgröße: 0;
}
@keyframes Blasen {
  0% {
    Hintergrundposition: 18 % 40 %, ...;
  }
  50 % {
    Hintergrundposition: 10 % 44 %, ...;
  }
  100 % {
    Hintergrundposition: 5 % 44 %, ...;
    Hintergrundgröße: 0 % 0 %;
  }
}

Den Quellcode können Sie hier einsehen.

Der einzige Nachteil kann sein, dass die Initialisierungsanimation einmal ausgeführt wird.

Zusammenfassung

Oben wird eine reine CSS-Implementierung einer Partikelanimationsschaltfläche vorgestellt. Die Vorteile liegen auf der Hand. Sie können CSS kopieren und direkt in das Projekt einfügen, um es zu verwenden, unabhängig davon, ob es sich um ein natives Projekt oder ein react handelt. Es müssen keine Ereignisse oder zusätzliche Logikverarbeitungen gebunden werden, was die vorhandene Erfahrung verbessert. Stellen Sie sich vor, wenn dies ein „Kaufen“-Button wäre, würden Sie dann mehr kaufen? Mich würde es auf jeden Fall anziehen, haha~

Es gibt noch einige Mängel. Beispielsweise ist die obige Positionierung sehr arbeitsintensiv. Es wird empfohlen, diese Funktionen nach Abschluss des Gesamtprojekts zu optimieren. Sie können auch versuchen, einige Visualisierungstools zu erstellen, um den Arbeitsaufwand zu verringern. Das ist alles.

Zusammenfassen

Oben sehen Sie den vom Editor eingeführten dynamischen CSS-Partikel-Button-Effekt. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!