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

Projektpraxis zum Bereitstellen von Docker-Containern mit Portainer

Inhaltsverzeichnis 1. Hintergrund 2. Bedienungssc...

Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten

Hintergrund Während des Projektentwicklungsprozes...

Ein netter HTML-Druckcode unterstützt das Umblättern

ylbtech_html_drucken HTML-Druckcode, unterstützt S...

Wie viele Daten können in einer MySQL-Tabelle gespeichert werden?

Programmierer müssen sich viel mit MySQL befassen...

CSS implementiert horizontal scrollende Navigationsleiste auf Mobilgeräten (gilt auch für PC-Geräte)

Funktion Herkunft Ich habe kürzlich an einem H5 g...

Extrahieren Sie bestimmte Dateipfade in Ordnern basierend auf Linux-Befehlen

In letzter Zeit besteht der Bedarf, automatisch n...

Häufige Verwendung von Hooks in React

Inhaltsverzeichnis 1. Was ist ein Hook? 2. Warum ...

So implementieren Sie eine Paging-Abfrage in MySQL

SQL-Paging-Abfrage:Hintergrund Im System des Unte...

Detaillierte Bereitstellungsschritte für MySQL MHA-Hochverfügbarkeitskonfiguration und Failover

Inhaltsverzeichnis 1. Einführung in MHA 1. Was is...

WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}

Vorwort Bei der WeChat-Applet-Entwicklung (native...

Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial

Inhaltsverzeichnis 1: Kennwortfreie Anmeldekonfig...

CentOS 7 kann nach dem Ändern der Netzwerkkarte nicht auf das Internet zugreifen

Ping www.baidu.com unbekannter Domänenname Ändern...

Anwendungshandbuch für chinesische WEB-Schriftarten

Die Verwendung von Schriftarten im Web ist sowohl ...

Zusammenfassung der Meta-Tags in HTML, Zusammenfassung der Meta-Attribute in HTML5-Heads

Vorwort Meta ist ein Hilfstag im Kopfbereich der ...

Detaillierte Erklärung der Verwendung von zwei Arten von temporären Tabellen in MySQL

Externe temporäre Tabellen Eine mit CREATE TEMPOR...