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
Webpack erstellt ein Gerüst zum Verpacken von TypeScript-Code
Erstellen eines Ordners Verzeichnisstruktur: daba...
Spezifische Verwendung des Vollbild-Scrollens von fullpage.js
1.fullpage.js Download-Adresse https://github.com...
Klicken Sie in Vue auf den Umschaltknopf, um die Schaltfläche zu aktivieren und dann zu deaktivieren.
Die Implementierungsmethode gliedert sich in drei...
So installieren Sie Docker auf CentOS
Hier stellen wir nur die relativ einfache Install...
Die einfachste Lösung für das Problem, dass Sublime Text in Ubuntu kein Chinesisch eingeben kann
Sublimieren Sublime Text ist ein Code-Editor (Sub...
Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker
Problemphänomen: [root@localhost ~]# Docker-Image...
Spezifische Verwendung von MySQL-Globalsperren und Sperren auf Tabellenebene
Inhaltsverzeichnis Vorwort Globale Sperre Tabelle...
Allgemeine Überlegungen zum Erstellen eines Hadoop 3.2.0-Clusters
Ein Port ändert sich In Version 3.2.0 beträgt der...
Tipps zum Erstellen von HTML-E-Mails, die in herkömmlichen Postfächern normal angezeigt werden können
Tipps zum Senden von HTML-E-Mails: Verwenden Sie ...
Mehrere Möglichkeiten zur Lösung von CSS-Stilkonflikten (Zusammenfassung)
1. Verfeinern Sie den Selektor Durch die Verwendu...
Drei Möglichkeiten zum Teilen der Komponentenlogik in React
Ohne weitere Umschweife sind dies diese drei Meth...
Eine kurze Analyse der parallelen WriteSet-Replikation von MySQL
【Historischer Hintergrund】 Ich arbeite seit drei ...
Linux verwendet if, um zu bestimmen, ob ein Verzeichnis existiert.
So verwenden Sie „if“ in Linux, um festzustellen,...
Vue implementiert das Senden von Emoticons im Chatfenster
Der spezifische Code zum Senden von Emoticons im ...
CentOS 7: Erläuterung zum Wechseln des Boot-Kernels und des Boot-Modus
Centos7-Switch-Boot-Kernel Hinweis: Bei Bedarf wi...