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 Anzeigen und Ändern von MySQL-Zeichensätzen
1. Überprüfen Sie den Zeichensatz 1. Überprüfen S...
30 Minuten, um Ihnen ein umfassendes Verständnis von React Hooks zu vermitteln
Inhaltsverzeichnis Überblick 1. useState 1.1 Drei...
Einige Einstellungen von Div bezüglich Rahmen und Transparenz
rahmen: Stil = „Rahmenstil: durchgezogen; Rahmenbr...
Implementierungscode für mehrzeilige Textkomponenten der Vue-Faltanzeige
Faltdisplay mit mehrzeiligem Textbaustein Falten ...
So verwenden Sie die Vue-Timeline-Komponente
In diesem Artikelbeispiel wird der spezifische Im...
MySQL-Transaktionsdetails
Inhaltsverzeichnis Einführung Vier Merkmale von T...
Eine kurze Erläuterung zum Anpassen der Hostdatei in Docker
Inhaltsverzeichnis 1. Befehl 2. docker-compose.ym...
Mehrere Möglichkeiten zum Speichern von Bildern in einer MySQL-Datenbank
Normalerweise müssen die von Benutzern hochgelade...
React Native realisiert den Auf- und Ab-Pull-Effekt der Überwachungsgeste
React Native implementiert die Überwachungsgeste ...
Reines CSS zum Implementieren der Funktion zum Öffnen und Schließen von Auswahlfeldern im iOS-Stil
1 Wirkung Demo-Adresse: https://www.albertyy.com/...
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)
In diesem Artikel wird der spezifische JavaScript...
Lösung zum Ändern des Datenspeicherorts der Datenbank in MySQL 5.7
Da die in der MySQL-Datenbank gespeicherten Daten...
Beispielcode zur Implementierung eines 3D-Rotationseffekts mit reinem CSS
Verwenden Sie hauptsächlich die Eigenschaften „pr...
Zusammenfassung des JS-Ausführungskontexts und -umfangs
Inhaltsverzeichnis Vorwort Text 1. Konzepte im Zu...
Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld
Voraussetzungen Compose ist ein Tool zum Orchestr...