Beispielcode zur Implementierung des wellenförmigen Wasserballeffekts mit CSS

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

Bildbeschreibung hier einfügen

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    

Artikel empfehlen

Interpretieren von MySQL-Client- und Serverprotokollen

Inhaltsverzeichnis MySQL-Client/Server-Protokoll ...

JavaScript zum Erzielen eines Akkordeoneffekts

In diesem Artikel wird der spezifische Code für J...

JavaScript implementiert die Kontrollkästchenauswahlfunktion

In diesem Artikelbeispiel wird der spezifische Ja...

JS verwendet die Methode „reduce()“, um Baumstrukturdaten zu verarbeiten

Inhaltsverzeichnis Definition Grammatik Beispiele...

MySQL-Gruppierungsmethode für die Gruppierungssequenz einzelner Wörter und die Gruppierung mehrerer Felder

Ich habe hier eine Warentabelle erstellt. Schauen...

So implementieren Sie mit CSS3 eine Warteschlangenanimation ähnlich einer Online-Liveübertragung

Ein Freund in der Gruppe hat zuvor eine Frage ges...

Grundlegende Verwendung von Unterabfragen in MySQL

Inhaltsverzeichnis 1. Unterabfragedefinition 2. U...

So beheben Sie den MySQL-FEHLER 1045 (28000) - Zugriff wegen Benutzer verweigert

Problembeschreibung (die folgende Diskussion besc...

So verwenden Sie dl(dt,dd), ul(li), ol(li) in HTML

HTML <dl> Tag #Definition und Verwendung Da...

Lösung für das automatische Trennen der Verbindung von Navicat zur Datenbank nach einer gewissen Zeit

Dies liegt daran, dass der Datenbankserver so ein...

So verwenden Sie benutzerdefinierte CSS-Variablen in Vue

Inhaltsverzeichnis Die benutzerdefinierte CSS-Var...

Ein kurzer Vortrag über das Klonen von JavaScript

Inhaltsverzeichnis 1. Oberflächliches Klonen 2. T...

CSS-Tipps zur Implementierung der Chrome-Tab-Leiste

Dieses Mal schauen wir uns ein Navigationsleisten...

Detaillierte Erläuterung des Zahlungsfunktionscodes des Vue-Projekts

1. Alipay-Methode: Alipay-Methode: Klicken Sie zu...

Nützliche Codes zum Erstellen von Webseiten

<br />Wie kann ich die Bildlaufleiste auf de...