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
Layim in Javascript, um Freunde und Gruppen zu finden
Derzeit haben die Verantwortlichen von Layui die ...
Erläuterung des Prozesses des Docker-Packaging-Node-Projekts
Als Backend-Programmierer muss ich manchmal an Fr...
js-Objekt, um einen Daten-Paging-Effekt zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
So ändern Sie den Hostnamen in Linux
1. Den aktuellen Hostnamen anzeigen [root@fangjia...
Zusammenfassung der benutzerdefinierten JavaScript-Objektmethoden
Inhaltsverzeichnis 1. Verwenden Sie Objekt, um ei...
jQuery erzielt einen atmenden Karusselleffekt
In diesem Artikel wird der spezifische Code von j...
Analyse des GTK-Treeview-Prinzips und der Verwendung
Die GtkTreeView-Komponente ist eine erweiterte Ko...
Vue implementiert die Benutzeranmeldungsumschaltung
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung gängiger Befehle für Ubuntu-Server
Die meisten der folgenden Befehle müssen in der K...
Erstellen Sie eine virtuelle Umgebung mit venv in Python3 in Ubuntu
1. Virtuelle Umgebung folgt dem Projekt, erstelle...
Detaillierte Erklärung des Unterschieds zwischen Gerätebreite und Breite in CSS3-Medienabfragen
1.Gerätebreite Definition: Definiert die sichtbar...
Binäre Installation von MySQL 5.7.23 unter CentOS7
Die Installationsinformationen im Internet sind u...
HTML-Popup-Div ist sehr nützlich, um eine mobile Zentrierung zu realisieren
Code kopieren Der Code lautet wie folgt: <!DOC...
So verbergen und entfernen Sie Bildlaufleisten in HTML
1. HTML-Tags mit Attributen XML/HTML-CodeInhalt i...
Theorie: Die zwei Jahre User Experience
<br />Es ist nicht länger als zwei Jahre her...