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
5 Punkte, auf die Sie beim Erstellen einer Webseite achten sollten
1. Farbabstimmungsproblem <br />Eine Webseit...
Beispielcode zur Implementierung des Vollbild-Scrolleffekts von fullpage.js mit CSS
Als ich kürzlich CSS studierte, stellte ich fest,...
Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten
Inhaltsverzeichnis 1. So erhalten Sie unterschied...
So löschen Sie node_modules und installieren es neu
Inhaltsverzeichnis Schritt 1: Installieren Sie no...
Web-Frontend-Entwicklung CSS-bezogene Teamzusammenarbeit
Die Frontend-Entwicklungsabteilung wächst, die Mi...
Das WeChat-Applet implementiert einen Countdown zum Senden des SMS-Bestätigungscodes
In diesem Artikel finden Sie den spezifischen Cod...
Ubuntu 16.04 Installations-Tutorial unter VMware 12
In diesem Artikel finden Sie das Installations-Tu...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27 winx64
In diesem Artikel wird die Installations- und Kon...
Beispiel für die Konfiguration mehrerer SSL-Zertifikate für eine einzelne Nginx-IP-Adresse
Standardmäßig unterstützt Nginx nur ein SSL-Zerti...
Kontinuierliche Bereitstellung mit Jenkins und Docker unter Docker
1. Was ist Continuous Delivery Der Ausgabeprozess...
Containerisierungstransformation für Docker-Großprojekte
Virtualisierung und Containerisierung sind zwei u...
Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen
Das Entwerfen der Navigation für eine Website ist...
Webprojektentwicklung VUE-Mischungs- und Vererbungsprinzip
Inhaltsverzeichnis Mischen Mixin-Hinweis (doppelt...
Implementierung der Installation und Deinstallation von CUDA und CUDNN in Ubuntu
Inhaltsverzeichnis Vorwort Installieren des Grafi...
Referenz zur Webseitenerstellung im IE6 - Standardstil im IE6
Dies ist eigentlich kein offizielles Dokument des ...