Reines CSS zum Erzielen eines schmelzenden Kerzenmusters (Wassertropfen) – Beispielcode
|
Ergebnisse erzielen
Umsetzungsideen Der Schmelzeffekt wird durch den Kontrast und die Unschärfe des Filters erzielt. Code <!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <title>Wassertropfeneffekt</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </Kopf> <Text> <div class="hpc">Räumen Sie Ihre Kleidung weg, wenn es regnet</div> </body> </html>
html,Text{
Rand: 0;
Polsterung: 0;
Breite: 100 %;
Höhe: 100%;
Überlauf: versteckt;
Hintergrund: #000;
Filter: Kontrast (20);
}
.beide{
links: 0;
Inhalt: "";
Breite: 10px;
Höhe: 20px;
unten: -20px;
Randradius: 50 %;
Position: absolut;
Hintergrundfarbe: #fff;
}
.hpc{
oben: 80px;
links: 100px;
Farbe: #fff;
Breite: 400px;
Höhe: 107px;
Schriftgröße: 6rem;
Filter: Unschärfe (3px);
Schriftstil: kursiv;
Position: relativ;
transformieren: skewY(5 Grad);
Schriftfamilie: „Comic Sans MS“;
Rahmen unten: 10px durchgezogen #fff;
&::vor{
@erweitern .both;
Animation: 6 s lang bewegen, unendlich ein- und ausfahren;
}
&::nach{
@erweitern .both;
Animation: Bewegung 6 s 1 s, Ein- und Ausfahren unendlich;
}
@keyframes verschieben{
70 %
unten: -20px;
transformieren: übersetzen (380px, 5px);
}
80 %
transformieren: übersetzen (380px, 3px);
Deckkraft: 1;
}
100 %{
transformieren: übersetzen (380px, 180px);
Deckkraft: 0;
}
}
}
Konvertieren Sie einfach SCSS in CSS und importieren Sie es. Damit ist dieser Artikel über den Beispielcode zur Implementierung von Kerzenschmelzen (Wassertropfen) mit reinem CSS abgeschlossen. Weitere relevante CSS-Inhalte zum Kerzenschmelzen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Tutorial zur Installation und Konfiguration von Hbase unter Linux
>>: Importieren von CSS-Dateien unter Verwendung von Beurteilungsbedingungen
Artikel empfehlen
Detailliertes Beispiel für die Verwendung von useState in React
Verwendungsstatus useState fügt einer Komponente ...
Mysql-String-Abfangen und Abrufen von Daten im angegebenen String
Vorwort: Ich bin auf die Anforderung gestoßen, be...
Lösung zum Vergessen des MySQL-Root-Passworts in MACOS
MySQL ist ein relationales Datenbankverwaltungssy...
Wichtige Punkte zum Schreiben von Inhalten für META-Tags in HTML-Webseiten
Das META-Tag ist ein Hilfstag im Kopfbereich der ...
CSS-Listenverschiebung, um zu verhindern, dass sie von unten verdeckt wird, und um sich an die längere Verarbeitung des Bildschirmmodells anzupassen
1. Wenn das mobile Endgerät die Listenverschiebun...
So legen Sie fest, dass der Text im Dropdown-Auswahlmenü nach links und rechts gescrollt wird
Ich möchte das Marquee-Tag verwenden, um das Scrol...
Detaillierte Erläuterung der Nginx Reverse Proxy WebSocket-Konfiguration
Kürzlich habe ich bei der Arbeit an einem Projekt...
Eine kurze Analyse der MySQL-Kardinalitätsstatistiken
1. Was ist die Kardinalität? Mit Kardinalität wir...
js-Version zur Realisierung der Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Methoden und Schritte zum Bereitstellen einer GitLab-Umgebung basierend auf Docker
Hinweis: Es wird empfohlen, dass der Speicher der...
Verwendung des MySQL-Zeitstempels
Vorwort: Zeitstempelfelder werden häufig in MySQL...
Lernen Sie die MySQL-Zeichensatzeinstellungen in 5 Minuten kennen
Inhaltsverzeichnis 1. Inhaltsübersicht 2. Konzept...
Webseite WB.ExecWB - Beschreibung des Aufrufs der Druckmethode und Einführung in die Parameter
Webseite WB.ExecWB-Steuerungsdruckmethode Code ko...
Lösung für den Fall, dass der Tomcat-Server tomcat7w.exe nicht öffnen kann
Beim Konfigurieren des Tomcat-Servers ist mir heu...
Konfigurationsmethode für die Mehrfachauswahlfunktion von React Mouse
Im Allgemeinen verfügen Listen über Auswahlfunkti...