CSS3 realisiert Partikelanimationseffekte beim Matching von Königen

CSS3 realisiert Partikelanimationseffekte beim Matching von Königen

Beim Codieren werden Sie feststellen, dass viele Dinge dasselbe Ziel haben. Es gibt Tausende von Möglichkeiten, das Problem zu lösen, und jede Methode, mit der das Problem gelöst werden kann, ist eine gute Methode. Sie müssen den Code nicht sehr ausgefeilt schreiben, da ihn die Leute später sonst nicht verstehen und die Wartung Kopfschmerzen bereiten wird.

Daher ist die Verwendung des einfachsten und beliebtesten Codes für die spätere Wartung und Entwicklung förderlicher.

Schauen wir uns zunächst die Vorschau des Partikelanimationseffekts im Hintergrund an:

Partikelanimation für Schaltflächenklicks

<div Klasse="Schaltfläche">
  <div class="button-text">Bestätigen</div>
</div>

Da die Schaltfläche trapezförmig ist, hat der vorherige Code dem Schaltflächenselektor eine Pseudoklasse hinzugefügt, um das Trapez zu implementieren. Daher können wir nur eine weitere Elementebene (Schaltflächentext) hinzufügen, um die Partikel zu implementieren.

.button-text {
  Position: relativ;
  Breite: 100 %;
  Rahmenradius: 4px;
  Rand: keiner;
  Cursor: Zeiger;
}
.button-text:vorher, 
.button-text:nach {
  Position: absolut;
  Inhalt: '';
  Anzeige: Block;
  Breite: 140%;
  Höhe: 100%;
  links: -20%;
  Z-Index: -1000;
  Hintergrundwiederholung: keine Wiederholung;
}
.button-text:vor {
  Anzeige: keine;
  oben: -75%;
  Hintergrundbild: 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, transparent 20%, #fff 20%, transparent 30%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radialer Farbverlauf (Kreis, #fff 20 %, transparent 20 %);
  Hintergrundgröße: 
    10% 10%, 
    20 % 20 %, 
    15 % 15 %, 
    20 % 20 %, 
    18% 18%, 
    10% 10%, 
    15 % 15 %, 
    10% 10%, 
    18 % 18 %;
}
.button-text:nach {
  Anzeige: keine;
  unten: -75%;
  Hintergrundbild: 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radialer Farbverlauf (Kreis, #fff 20 %, transparent 20 %);
  Hintergrundgröße: 
    15 % 15 %, 
    20 % 20 %, 
    18% 18%, 
    20 % 20 %, 
    15 % 15 %, 
    10% 10%, 
    20 % 20 %;
}
.button-text:aktiv {
  transformieren: Skalierung (0,9);
}

Fügen Sie button-text -Pseudoelement background-image hinzu und verwenden Sie radial-gradient , um mehrere Kreise als Partikel zu zeichnen.

transform: scale(0.9) skaliert das button-text Element, wenn mit der Maus geklickt wird.

Sie sollten gesehen haben, dass das Standard-Pseudoelement display: none; hidden“ ist. Wenn wir also klicken, müssen wir einen Selektor hinzufügen, ihn anzeigen lassen und die Animation ausführen.

js, um auf Klickereignisse zu warten und den animate Selektor nach dem Klicken hinzuzufügen.

var animateButton = Funktion(e) {
  e.preventDefault;
  e.target.classList.remove('animieren');
  e.target.classList.add('animieren');
  setzeTimeout(Funktion(){
    e.target.classList.remove('animieren');
  },700);
};

var Klassenname = document.getElementsByClassName("Schaltflächentext");
für (var i = 0; i < Klassenname.Länge; i++) {
  Klassenname[i].addEventListener('klicken', animierenButton, false);
}

Dann fügen wir CSS hinzu und starten die Animation

.button-text.animate:vor {
  Anzeige: Block;
  Animation: TopBubbles gleiten 0,75 s vorwärts ein und aus;
}
.button-text.animate:nach {
  Anzeige: Block;
  Animation: BottomBubbles gleiten 0,75 s vorwärts ein und aus;
}
@keyframes topBubbles {
  0% {
    Hintergrundposition: 
      5% 90%, 
      10% 90%, 
      10% 90%, 
      15 % 90 %, 
      25 % 90 %, 
      25 % 90 %, 
      40% 90%, 
      55 % 90 %, 
      70 % 90 %;
  }
  50 % {
    Hintergrundposition: 
      0% 80%, 
      0% 20%, 
      10% 40%, 
      20% 0%, 
      30 % 30 %, 
      22 % 50 %, 
      50 % 50 %, 
      65 % 20 %, 
      90 % 30 %;
  }
  100 % {
    Hintergrundposition: 
      0% 70%, 
      0% 10%, 
      10% 30%, 
      20% -10%, 
      30% 20%, 
      22% 40%, 
      50% 40%, 
      65 % 10 %, 
      90 % 20 %;
    Hintergrundgröße: 
      0% 0%, 
      0% 0%,  
      0% 0%,  
      0% 0%,  
      0% 0%,  
      0 % 0 %;
  }
}
@keyframes bottomBubbles {
  0% {
    Hintergrundposition: 
      10 % -10 %,
      30% 10%,
      55 % -10 %,
      70% -10%,
      85 % -10 %,
      70% -10%,
      70 % 0 %;
  }
  50 % {
    Hintergrundposition: 
      0% 80%,
      20% 80%,
      45 % 60 %,
      60 % 100 %,
      75 % 70 %,
      95 % 60 %,
      105 % 0 %;
  }
  100 % {
    Hintergrundposition: 
      0% 90%,
      20% 90%,
      45 % 70 %,
      60 % 110 %,
      75 % 80 %,
      95 % 70 %,
      110 % 10 %;
    Hintergrundgröße: 
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0 % 0 %;
  }
}

Wir verwenden background-position um die Position des Hintergrunds zu ändern, und background-size um die Größe zu ändern und einen Animationseffekt zu erzeugen.

Dadurch wird ein Partikelanimationseffekt beim Klicken auf eine Schaltfläche erstellt.

In ähnlicher Weise können wir dem Hintergrund den gleichen Partikeleffekt hinzufügen. Der Code ist grundsätzlich kopierbar.

Partikeleffekte im Hintergrund

.king:vor {
  Position: absolut;
  Inhalt: '';
  Anzeige: Block;
  Breite: 100 %;
  Höhe: 100%;
  oben: 0;
  Z-Index: 1;
  Hintergrundwiederholung: keine Wiederholung;
  Deckkraft: 0,4;
}
.king:vor {
  Hintergrundbild: 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, transparent 20%, #fff 20%, transparent 30%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radial-gradient(Kreis, #fff 20%, transparent 20%), 
    radialer Farbverlauf (Kreis, #fff 20 %, transparent 20 %);
  Hintergrundgröße: 
    10% 10%, 
    12% 12%, 
    5% 5%, 
    12% 12%, 
    5% 5%, 
    10% 10%, 
    5% 5%, 
    10% 10%, 
    5 % 5 %;
  Anzeige: Block;
  Animation: TopBubbles gleiten 3 s vorwärts und unendlich langsam hinein und wieder hinaus;
}

Hier ändern wir die Partikelgröße, Transparenz und Ebene (Z-Index). Lassen Sie die Animation am Anfang ausführen und endlos wiederholen. Für den Effekt der Animationsausführung können wir direkt den Effekt der Schaltfläche oben (topBubbles) verwenden.

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.

<<:  Detaillierte grafische Beschreibung des MySql8.023-Installationsprozesses (Erstinstallation)

>>:  Die Organisation W3C gibt Stilempfehlungen für HTML4

Artikel empfehlen

Geschickte Nutzung von WebKit-Box-Reflect zur Erzielung verschiedener dynamischer Effekte (Zusammenfassung)

In einem Artikel vor langer Zeit habe ich über di...

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Die Zeit vergeht immer überraschend schnell, ohne...

Erklärung der MySQL-Indextypen Normal, Unique und Full Text

Zu den Indextypen von MySQL gehören Normalindex, ...

Ein unverzichtbarer Karriereplan für Webdesigner

Originalartikel, bei Nachdruck bitte Autor und Qu...

So deinstallieren und installieren Sie Tomcat neu (mit Bildern und Text)

Deinstallieren Sie tomcat9 1. Da die Installation...

Lösen Sie das Problem „Willkommen bei nginx auf Fedora!“. Nach der Installation von nginx auf Centos7 befindet sich im Verzeichnis conf.d keine Datei default.conf.

Problembeschreibung Installieren Sie nginx auf Te...

Praktische Methode zum Löschen verknüpfter Tabellen in MySQL

In der MySQL-Datenbank können Tabellen, nachdem s...

So konfigurieren Sie SSL für den Koa2-Dienst

I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...

Detailliertes Tutorial zur Integration von Apache Tomcat mit dem IDEA-Editor

1. Laden Sie das komprimierte Tomcat-Paket von de...

CSS-Lösung zum Zentrieren von Elementen mit variabler Breite und Höhe

1. Horizontale Mitte Öffentlicher Code: html: <...

Schritte für Vue zur Verwendung von Ref, um Komponenten über Ebenen hinweg zu erhalten

Vue verwendet Ref, um Komponenteninstanzen über E...

Detaillierte Erläuterung häufig verwendeter Nginx-Umschreibregeln

Dieser Artikel enthält einige häufig verwendete U...

Grundlegende Befehle für MySQL-Datenbankoperationen

1. Erstellen Sie eine Datenbank: Daten erstellen ...

Grafische Erklärung des Funktionsaufrufs der Protodatei in Vue

1. Proto kompilieren Erstellen Sie einen neuen Pr...

Code zum Ausrichten von Kontrollkästchen und Radiotext im Formular

Ausrichtungsprobleme wie type="radio" un...