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 Erläuterung des Problems, dass der Speicherplatz nach dem Löschen der Linux-Datei nicht freigegeben wird
Vorwort Wenn der Systemspeicherplatz zu groß ist ...
Detailliertes Tutorial zur Installation des Jenkins-Containers in einer Docker-Umgebung
Empfohlene Docker-Lernmaterialien: https://www.ru...
So fahren Sie eine MySQL-Instanz sicher herunter
In diesem Artikel wird der Vorgang zum Herunterfa...
Detaillierte grafische Anweisungen zum Herunterladen und Installieren der entpackten Version von MySQL 5.7.18 und zum Starten des MySQL-Dienstes
Da das Distributionspaket von MySQL Community Ser...
Zusammenfassung der 10 am häufigsten gestellten Fragen in Linux-Interviews
Vorwort Wenn Sie sich auf die Stelle eines Betrie...
So verwenden Sie html2canvas, um HTML-Code in Bilder umzuwandeln
Konvertieren Sie Code in ein Bild mit html2canvas...
Vue-Router-Beispielcode zum dynamischen Generieren von Navigationsmenüs basierend auf Backend-Berechtigungen
Inhaltsverzeichnis Vue.js 1. Global Guard registr...
Virtual Box-Tutorialdiagramm zum Duplizieren virtueller Maschinen
Nachdem man sich an VM gewöhnt hat, ist der Wechs...
Detaillierte Erklärung des Unterschieds zwischen temporärer MySQL-Tabelle und Partitionstabelle
Temporäre Tabellen und Speichertabellen Eine Spei...
So generieren Sie ein Kommentarskript für die Hive-Tabellenerstellungsanweisung in MySQL-Metadaten
Vorwort Dieser Artikel stellt hauptsächlich den r...
W3C Tutorial (13): W3C WSDL Aktivitäten
Bei Webdiensten geht es um die Kommunikation zwis...
Implementierungscode zum Hinzufügen eines Schrägstrichs zum Vue-Elementheaders
<Vorlage> <div Klasse="App-Containe...
Detaillierter Installationsprozess und Prinzip des Vue-Routers
Inhaltsverzeichnis 1. Implementierungsprinzip des...
Detaillierte Erklärung des MySQL-Überwachungstools mysql-monitor
1. Übersicht mysql-monitor MySQL-Überwachungstool...
Implementierung des CSS Fantastic Border Animation-Effekts
Heute habe ich auf der Blog-Site shoptalkshow ges...