Erkennen Sie den CSS-Ladeeffekt nach dem Klicken auf die Schaltfläche

Da es in dem Produkt meiner Firma eine Schaltfläche gibt, bei der nach dem Klicken eine Wartezeit von ein bis zwei Sekunden besteht (um eine Bestätigungs-E-Mail zu senden), habe ich zur Verbesserung des Benutzererlebnisses eine Ladeanimation erstellt, um das Ladefenster von ein bis zwei Sekunden nach dem Klicken zu vermeiden. Ursprünglich wollte ich das Problem direkt mit einem GIF lösen, aber ich wollte diese Gelegenheit zum Üben nutzen und habe daher den CSS-Gradienteneffekt verwendet, um dies zu erreichen. Unerwarteterweise ist der Effekt ziemlich gut und es müssen keine zusätzlichen Elemente wie Div hinzugefügt werden. Dies kann durch einfaches Ändern des CSS und Hinzufügen von Klickereignissen erreicht werden.

Effektdemonstration

Schauen wir uns zunächst den fertigen Effekt an.

Implementierungsprozess

Dieser Effekt ist eigentlich ganz einfach zu erstellen. Schauen wir uns zunächst die Originalschaltfläche an. Es handelt sich lediglich um ein Div mit angewendetem CSS.

HTML:

<div class="btn">klick mich</div>

CSS:

.btn{
  Position: relativ;
  Breite: 200px;
  Höhe: 30px;
  Zeilenhöhe: 30px;
  Textausrichtung: zentriert;
  Rahmenradius: 3px;
  Hintergrund: #5ad;
  Farbe: #fff;
  Cursor:Zeiger;
}

Es wird so aussehen (nur sehr einfaches CSS):

Wie fügt man also eine Animation hinzu? Zu diesem Zeitpunkt müssen Sie CSS-Pseudoelemente verwenden, oben ein vorheriges Pseudoelement abdecken und die Animation in dieses Pseudoelement einfügen.

CSS:

.btn::vor{
  Inhalt: „wird geladen“;
  Position: absolut;
  Breite: 200px;
  Höhe: 30px;
  Zeilenhöhe: 30px;
  Textausrichtung: zentriert;
  Rahmenradius: 3px;
  z-Index: 2;    
  oben: 0;
  links: 0;
  Farbe: #fff;
  Textschatten: rgba(100,0,0,1) 0 0 3px;
  Hintergrund: #c00;
}

Nach dem Aufsetzen werden Sie feststellen, dass das Original abgedeckt ist.

Nachdem Sie das Prinzip verstanden haben, besteht der nächste Schritt darin, den Hintergrund von vorher in eine Animation zu ändern. Dabei werden zwei CSS3-Techniken verwendet. Die erste ist der Farbverlaufshintergrund und die zweite ist eine Animation. Die erste Farbverlaufsfarbe ist komplizierter. Die Hauptsache ist, den Farbverlauf in einem 45-Grad-Winkel füllen zu lassen. Der Inhalt ist, dass die beiden Farben zueinander passen, aber es muss mit der Hintergrundgröße abgestimmt werden, damit der Farbverlauf reibungslos verbunden werden kann. Dies ist normalerweise der Ort, dessen Anpassung am längsten dauert.

Hintergrund: linearer Farbverlauf (45 Grad, #fc0 0 %, #fc0 20 %, #fa0 20 %, #fa0 45 %, #fc0 45 %, #fc0 70 %, #fa0 70 %, #fa0 95 %, #fc0 95 %, #fc0 100 %);
Hintergrundgröße: 30px 30px;
Hintergrundposition: 0 0;

Wie Sie auf dem Bild unten sehen können, ist das resultierende Erscheinungsbild möglicherweise nicht gut verbunden, wenn Sie es nicht schrittweise anpassen. Wenn die Anpassungen jedoch abgeschlossen sind, ist die Verbindung reibungslos.

Nach Abschluss müssen Sie den CSS3-Animationseffekt anwenden, um die Hintergrundposition zu ändern. Der Hintergrund wird dann automatisch geändert.

Animation: Klick 1 s unendlich linear;    

@keyframes klicken {
  0 %{
    Hintergrundposition: 0 0;
  }
  100 %{
    Hintergrundposition: 30px 0;
  }
} 

An diesem Punkt sind 80 % der Arbeit erledigt. Der letzte Schritt besteht darin, ein Klickereignis hinzuzufügen. Ich verstecke hier das Pseudoelement mit display:none und füge dann eine Klasse namens click hinzu. Wenn Sie auf die Schaltfläche klicken, wird die Schaltfläche mit der Klasse click angewendet und das Pseudoelement wird angezeigt. Nachfolgend sehen Sie den vollständigen Code, der jedoch etwas vereinfacht wurde. Nach 2 Sekunden Klicken kehrt die Schaltfläche in ihren ursprünglichen Zustand zurück.

CSS:

.btn,.btn::vor{
  Breite: 200px;
  Höhe: 30px;
  Zeilenhöhe: 30px;
  Textausrichtung: zentriert;
  Rahmenradius: 3px;
}
.btn{
  Position: relativ;
  Hintergrund: #5ad;
  Farbe: #fff;
  Cursor:Zeiger;
}
.btn::vor{
  Inhalt: „wird geladen“;
  Position: absolut;
  Anzeige: keine;
  z-Index: 2;
  oben: 0;
  links: 0;
  Farbe: #fff;
  Textschatten: rgba(100,0,0,1) 0 0 3px;
  Hintergrund: linearer Farbverlauf (45 Grad, #fc0 0 %, #fc0 20 %, #fa0 20 %, #fa0 45 %, #fc0 45 %, #fc0 70 %, #fa0 70 %, #fa0 95 %, #fc0 95 %, #fc0 100 %);
  Hintergrundgröße: 30px 30px;
  Hintergrundposition: 0 0;
  Animation: Klick 1 s unendlich linear;
}
.btn.click::before{
  Anzeige:Block;
}
@keyframes klicken {
  0 %{
    Hintergrundposition: 0 0;
  }
  100 %{
    Hintergrundposition: 30px 0;
  }
}

jQuery:

$(Funktion(){
  var Zeitgeber;
  $('.btn').on('klicken',function(){
    $('.btn').addClass('klicken');
    Zeitüberschreitung löschen(Timer);
    Timer = setzeTimeout(Funktion(){
      $('.btn').removeClass('klicken');
    },2000);
  });
}); 

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.