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
Detaillierte Erklärung der Zählung ohne Filterbedingungen in MySQL
zählen(*) erreichen 1. MyISAM: Speichert die Gesa...
So verwenden Sie async und await in JS
Inhaltsverzeichnis 1. asynchron 2. warten: 3. Umf...
Der gesamte Prozess der Verwendung von node.js Express zum automatischen Erstellen des Projekts
1. Installieren Sie die Express-Bibliothek und de...
Zusammenfassung der Unterschiede zwischen MySQL und Oracle (Vergleich der Funktionsleistung, Auswahl, SQL bei der Verwendung usw.)
1. Parallelität Die wichtigste Funktion einer OLT...
Implementierung von Redis mit einem Master, zwei Slaves und drei Sentinels basierend auf Docker
Ich lerne derzeit etwas über Redis und Container ...
Die Element-UI-Tabelle realisiert die Dropdown-Filterfunktion
In diesem Artikelbeispiel wird der spezifische Co...
So zeigen Sie JSON-Daten in HTML an
Hintergrund: Manchmal müssen wir JSON-Daten direk...
MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)
String-Extraktion ohne Trennzeichen Fragenanforde...
Einführung in die Verschachtelungsregeln von HTML-Tags
Es gibt viele XHTML-Tags: div, ul, li, dl, dt, dd...
Docker Ändern des Docker-Speicherorts Ändern der Größenbeschränkung für Container-Images
Dies scheint mit der neuen Version nicht mehr mög...
Einführung in die Einrichtung von Tomcat für den automatischen Start auf einem Linux-System
1. Wechseln Sie in das Verzeichnis /etc/init.d: ...
Verstehen Sie das CSS3-Rasterlayout in 10 Minuten
Grundlegende Einführung Im vorherigen Artikel hab...
Zusammenfassung häufig verwendeter Toolfunktionen in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. Benutzerdefinierter...
Einführung in die Überwachung des MySQL MHA-Betriebsstatus
Inhaltsverzeichnis 1. Projektbeschreibung 1.1 Hin...
Lösen Sie das Problem, dass Navicat keine Verbindung zu MySQL auf dem Linux-Server herstellen kann
Am Anfang war ich traurig. Die Screenshots sind w...