HTML + CSS zum Erzielen des Spezialeffektcodes für die Aufladung der Wassertropfenfusion
|
Erster Blick auf die Wirkung:
Vorwort:Auf diese Idee kam ich, nachdem ich den Uploader Steven auf Bilibili gesehen hatte. Ich fand es großartig, also habe ich selbst eines gemacht. (reines CSS) erreichen:Definieren Sie ein Etikett mit drei Wassertropfenfeldern, einem kreisförmigen Feld zur Anzeige von Zahlen und einem unteren Feld:
<div Klasse="Kuang">
<div Klasse="Tropfen"></div>
<div Klasse="Tropfen"></div>
<div Klasse="Tropfen"></div>
<div Klasse="quan"></div>
99 %
</div>Geben Sie der untersten Box eine grundlegende Stilisierung. Flexibles Layout, so dass die drei Wassertropfen vorübergehend vertikal in der Mitte angeordnet werden.
.kuang{
Position: relativ;
Höhe: 100vh;
Anzeige: Flex;
Flex-Richtung: Spalte;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Hintergrundfarbe: rgb(5,5,5);
Filter: Kontrast (30);
}filter: contrast(30);Passt den Kontrast des Bildes an. Bei einem Wert von 0 % wird das Bild vollkommen schwarz. Bei einem Wert von 100% bleibt das Bild unverändert. Werte können 100 % überschreiten, was bedeutet, dass ein geringerer Kontrast verwendet wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1. Der Grundstil des Wassertropfens. Absolute Positionierung, so dass sich die drei Boxen überlappen.
.Tröpfchen{
Position: absolut;
Breite: 100px;
Höhe: 100px;
Randradius: 50 %;
Hintergrundfarbe: RGB (61, 233, 99);
Filter: Unschärfe (20px);
Animation: Herbst 3s linear unendlich;
Deckkraft: 0;
}Filter: Unschärfe (20px); legt Unschärfe auf das Bild fest. Wichtiger Punkt: Wir verwischen das Wassertropfenfeld, sodass die drei Wassertropfenfelder unscharf erscheinen. Als nächstes stellen wir den Bildkontrast für die darunterliegende Box so ein, dass das unscharfe Bild den Umriss neu zeichnet und den folgenden Effekt erzielt:
Geben Sie dem Kreis, der die Zahl anzeigt, einen Grundstil. Denken Sie daran, auch die Unschärfe einzustellen. Auf diese Weise wird der Bildkontrast mit den fallenden Wassertropfen integriert.
.quan{
Position: absolut;
Breite: 100px;
Höhe: 100px;
Randradius: 50 %;
Hintergrundfarbe: RGB (61, 233, 99);
Filter: Unschärfe (20px);
Animation: Zhuan 3s unendlich;
}Stellen Sie Animationen für die Wassertropfen ein, sodass diese von oben nach unten fallen und ihre Größe verändern. Sie können diese selbst anpassen und auf den Effekt einstellen, den Sie für am besten halten.
@keyframes fallen{
0 %{
Deckkraft: 0;
transformieren: Skalierung (0,8) übersetzenY (-500 %);
}
50 %{
Deckkraft: 1;
transformieren: Skalierung (0,5) übersetzenY (-100 %);
}
100 %{
transformieren: Skalierung (0,3) übersetzenY (0px);
}
}Spielen Sie die Animation mit einer Verzögerung für den zweiten und dritten Wassertropfen ab, sodass die drei Wassertropfen getrennt voneinander fallen. Was die Anzahl der Sekunden betrifft, können Sie sie langsam anpassen und so einstellen, wie Sie es für den besten Effekt halten.
.kuang div:nth-of-type(2){
Animationsverzögerung: 1,5 s;
}
.kuang div:nth-of-type(3){
Animationsverzögerung: 2 s;
}Animieren Sie den Kreis, der die Zahl anzeigt, sodass er sich dreht. Während dieser Zeit können Sie Größe, Winkel oder andere Änderungen vornehmen. Sie können die spezifischen Werte langsam selbst anpassen und sie so einstellen, dass sie Ihrer Meinung nach den besten Effekt erzielen.
@keyframes zhuan{
0 %{
transformieren: skalieren (1) drehen (0 Grad);
}
50 %{
transformieren: skalieren (1,1) drehen (180 Grad);
Höhe: 90px;
Radius des oberen linken Rands: 45 %;
Rahmen unten links Radius: 48 %;
}
100 %{
transformieren: skalieren (1) drehen (360 Grad);
}
}Vollständiger Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Nordlichtnacht. </Titel>
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
.kuang{
Position: relativ;
Höhe: 100vh;
Anzeige: Flex;
Flex-Richtung: Spalte;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Hintergrundfarbe: rgb(5,5,5);
Filter: Kontrast (30);
}
.Tröpfchen{
Position: absolut;
Breite: 100px;
Höhe: 100px;
Randradius: 50 %;
Hintergrundfarbe: RGB (61, 233, 99);
Filter: Unschärfe (20px);
Animation: Herbst 3s linear unendlich;
Deckkraft: 0;
}
.kuang div:nth-of-type(2){
Animationsverzögerung: 1,5 s;
}
.kuang div:nth-of-type(3){
Animationsverzögerung: 2 s;
}
@keyframes fallen{
0 %{
Deckkraft: 0;
transformieren: Skalierung (0,8) übersetzenY (-500 %);
}
50 %{
Deckkraft: 1;
transformieren: Skalierung (0,5) übersetzenY (-100 %);
}
100 %{
transformieren: Skalierung (0,3) übersetzenY (0px);
}
}
.quan{
Position: absolut;
Breite: 100px;
Höhe: 100px;
Randradius: 50 %;
Hintergrundfarbe: RGB (61, 233, 99);
Filter: Unschärfe (20px);
Animation: Zhuan 3s unendlich;
}
@keyframes zhuan{
0 %{
transformieren: skalieren (1) drehen (0 Grad);
}
50 %{
transformieren: skalieren (1,1) drehen (180 Grad);
Höhe: 90px;
Radius des oberen linken Rands: 45 %;
Radius des unteren linken Rands: 48 %;
}
100 %{
transformieren: skalieren (1) drehen (360 Grad);
}
}
Spanne{
Position: absolut;
Farbe: rgb(184, 182, 182);
Schriftgröße: 26px;
Schriftfamilie: „Fangsong“;
Schriftstärke: fett;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Kuang">
<div Klasse="Tropfen"></div>
<div Klasse="Tropfen"></div>
<div Klasse="Tropfen"></div>
<div Klasse="quan"></div>
99 %
</div>
</body>
</html>Zusammenfassen:Dies ist das Ende dieses Artikels über den HTML+CSS-Code zur Implementierung von Spezialeffekten für aufladende Wassertropfenfusionen. Weitere verwandte HTML-Inhalte zur Wassertropfenfusion finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation
>>: Reines CSS3 realisiert den Effekt des Ein- und Austretens von Divs in der richtigen Reihenfolge
Artikel empfehlen
Zabbix überwacht die Konfiguration der Docker-Anwendung
Der Einsatz von Containern kommt immer häufiger v...
JS implementiert das Ziehen des Fortschrittsbalkens, um die Transparenz von Elementen zu ändern
Was ich heute teilen möchte, ist die Verwendung v...
Detaillierte Erläuterung der CSS BEM-Schreibstandards
BEM ist ein komponentenbasierter Ansatz zur Weben...
Analyse der Implementierungsmethode zum Ändern des Standardnetzwerksegments von Docker
Hintergrund Alle Server des Unternehmens sind gek...
Lösen Sie das Problem der Randzusammenführung
1. Die Ränder von Geschwisterelementen zusammenfü...
Schleifenmethoden und verschiedene Durchlaufmethoden in js
Inhaltsverzeichnis for-Schleife While-Schleife do...
Öffentliche kostenlose STUN-Server
Öffentliche kostenlose STUN-Server Wenn das SIP-T...
Einige „Fallstricke“ beim Upgrade der MySQL-Datenbank
Bei kommerziellen Datenbanken hat die Datenbankak...
Detaillierte Erklärung der berechneten Eigenschaften, der Überwachungseigenschaften und des Lebenszyklus in Vue.js
Inhaltsverzeichnis Vorwort Berechnete Eigenschaft...
Methode der Iframe-Anpassung im webresponsiven Layout
Problem <br />Bei responsivem Layout sollte...
Zusammenfassung praktischer Methoden für JS-Anfänger zur Verarbeitung von Arrays
Methode join(): verbindet alle Elemente eines Arr...
Implementierung der Docker-Konfigurationsänderung des Alibaba Cloud-Image-Repository
Das Docker-Repository selbst ist sehr langsam, ab...
Tutorial zur Verwendung des Frameset-Tags in HTML
Frameset-Seiten unterscheiden sich etwas von norm...
Kreatives „Über uns“-Webseitendesign
Einzigartige „Über“-Seiten Eine gute Möglichkeit, ...
So passen Sie Docker-Images mit Dockerfile an
Anpassen von Bildern mit Dockerfile Unter Bildanp...