Beispielcode zur Implementierung des wellenförmigen Wasserballeffekts mit CSS
|
Heute habe ich einen neuen CSS-Spezialeffekt gelernt, den Wellenwasserballeffekt, der auch sehr schön ist
HTML:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<link rel="stylesheet" href="css/Wasserballeffekt.css">
</Kopf>
<Text>
<div Klasse="Haupt">
<div Klasse="Welle">
</div>
</div>
</body>
</html>CSS:
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Höhe: 100vh;
Hintergrund: linearer Farbverlauf (RGB (95,95,250) 10 %, RGB (3,3,110));
}
.main,.wave{
Breite: 200px;
Höhe: 200px;
Randradius: 50 %;
Position: absolut;
links: 50%;
oben: 50 %;
transformieren: übersetzen(-50 %,-50 %);
}
.hauptsächlich{
Rand: 3px, durchgehend dunkeltürkis;
Polsterung: 10px;
}
.Welle{
Hintergrund: dunkeltürkis;
Überlauf: versteckt;
}
.wave:nach{
Inhalt: "";
Breite: 300px;
Höhe: 300px;
Hintergrund: rgba(255, 255, 255, 0,8);
Position: absolut;
links: 50%;
oben: 0;
transformieren: übersetzen (-50 %, -60 %);
Randradius: 40 %;
Animation: Welle 5s linear unendlich;
}
.wave::vor{
Inhalt: „Wasserball“;
Position: absolut;
links: 50%;
oben: 0;
Farbe: dunkeltürkis;
Z-Index: 99;
transformieren: übersetzen (-50 %, 30 Pixel);
}
@keyframes Welle{
100 %{
transformieren: verschieben (-50 %, -60 %) drehen (360 Grad);
}
}Zusammenfassen Damit ist dieser Artikel über Beispielcode zur Implementierung des winkenden Wasserballeffekts mit CSS abgeschlossen. Weitere relevante CSS-Inhalte zum winkenden Wasserball finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Detaillierte Erklärung zur Verwendung von Eslint in Vue
>>: Gedanken zu copy_{to, from}_user() im Linux-Kernel
Artikel empfehlen
Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels
1. Reverse-Proxy-Beispiel 1 1. Erzielen Sie den E...
jQuery ermöglicht nahtloses Scrollen von Tabellen
In diesem Artikelbeispiel wird der spezifische Co...
Vue implementiert Akkordeoneffekt
In diesem Artikelbeispiel wird der spezifische Co...
Vue implementiert das Umschalten des Anmeldetyps
In diesem Artikelbeispiel wird der spezifische Co...
Fallstricke bei der neueren Version des IDEA2021 Tomcat10-Servlets
Da die Version, die ich beim Lernen verwendet hab...
10 SQL-Anweisungsoptimierungstechniken zur Verbesserung der MySQL-Abfrageeffizienz
Die Ausführungseffizienz der MySQL-Datenbank hat ...
Detaillierte Schritte zur Installation von MySQL 5.7 über YUM auf CentOS7
1. Gehen Sie zu dem Speicherort, an dem Sie das I...
Scrollen Sie in Vue nach unten, um weitere Daten zu laden. Detaillierte Erläuterung des Scroll-Falls
Vue-unendliches Scrollen Installieren npm install...
So implementieren Sie einen Animationsübergangseffekt im Frontend
Inhaltsverzeichnis Einführung Traditionelle Überg...
Lösen Sie das Problem, dass Sie auf dem Linux-Server nicht auf die RabbitMQ-Verwaltungsseite zugreifen können
Da eine bestimmte Funktion meines Projekts erford...
Allgemeine Benennungsregeln für CSS-Klassen und IDs
Öffentlicher Name der Seite: #wrapper - - Der äuß...
Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung
Im vorherigen Artikel zu Docker wurde die Konstru...
Analyse des Unterschieds zwischen absolutem und relativem Pfad in HTML
Wie in der Abbildung gezeigt: Mit einer einzelnen ...
Der Implementierungsprozess der ECharts Multi-Chart-Verknüpfungsfunktion
Wenn viele Daten angezeigt werden müssen, ist die...
Beschränken Sie die Eingabe in HTML-Textfelder auf Zahlen und Dezimalstellen.
Code: <input Typ="text" Klasse="...