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 Sie sollten gesehen haben, dass das Standard-Pseudoelement js, um auf Klickereignisse zu warten und den
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 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
Tutorial zum Verbinden und Verwenden von MySQL 8.0 im Maven-Projekt von IDEA
Schauen wir uns zunächst meine grundlegende Entwi...
Detaillierte Erklärung der Zeichensätze und Validierungsregeln in MySQL
1Mehrere gängige Zeichensätze Zu den gängigsten Z...
So verbergen und entfernen Sie Bildlaufleisten in HTML
1. HTML-Tags mit Attributen XML/HTML-CodeInhalt i...
Lassen Sie sich die tiefe Kopie von js verstehen
Inhaltsverzeichnis js tiefe Kopie Methode der Dat...
Hinweise zu Fallstricken bei Vuex und Pinia in Vue3
Inhaltsverzeichnis einführen Installation und Ver...
So installieren Sie Grafana und fügen Influxdb-Überwachung unter Linux hinzu
Installieren Sie Grafana. Die offizielle Website ...
Web realisiert den Code zum Öffnen des Fensters zum Hochladen von Dateien durch Klicken auf das Bild
Code kopieren Der Code lautet wie folgt: <Stil...
Vue verwendet Element-UI, um die Menünavigation zu implementieren
In diesem Artikel wird der spezifische Code von V...
Einführung in die Verwendung des http-equiv-Attributs im Meta-Tag
Meta ist ein Hilfstag im Kopfbereich der HTML-Spra...
Techniken zur Optimierung von MySQL-Paging-Abfragen
In Anwendungen mit Paging-Abfragen sind Abfragen,...
Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts
Welche Produkte möchten Sie erwähnen? Vor kurzem ...
JavaScript ermittelt, ob der Browser IE ist
Als Frontend-Entwickler komme ich an den Tücken d...
So implementieren Sie Datenpersistenz mit dem Vuex-Drittanbieterpaket
Zweck: Ermöglichen Sie die gleichzeitige lokale S...
CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts
Panther begann als Anfänger und ich bin immer noc...
Schritte zum Erstellen eines Vite-Projekts
Inhaltsverzeichnis Vorwort Was macht Yarn Create?...