Detaillierte Erklärung der Text-Fill-Color-Eigenschaft in CSS3
|
Was bedeutet Textfüllfarbe? Rein wörtlich bedeutet es „Textfüllfarbe“, tatsächlich legt es aber auch die Füllfarbe des Textes im Objekt fest, was der Wirkung der Farbe sehr ähnlich ist. Wenn Sie die Eigenschaften „Textfüllfarbe“ und „Farbe“ gleichzeitig festlegen, überschreibt „Textfüllfarbe“ den Farbwert. Da „Text-Fill-Color“ ein neues Attribut von CSS3 ist, fragt sich jeder, wenn es um neue Attribute von CSS3 geht, nach den Auswirkungen auf die Kompatibilität. ? Hey, ich kann nur gnadenlos sagen, dass die Kompatibilität sehr schlecht ist. Es ist nur für Browser mit dem WebKit-Kernel wirksam. . Wie schade! ! Obwohl die Kompatibilität schlecht ist, können damit sehr coole Texteffekte wie fließender Text, hohler Text usw. erzeugt werden. Um fließenden Text zu erstellen, können Sie nicht einfach Textfüllfarben verwenden. Sie müssen auch CSS3-Animationen kombinieren, um den Animationseffekt zu erzielen. Hier ist der Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
*{Rand: 0;Padding: 0;}
._borderWrap{
Breite: 180px;
Höhe: 150px;
Position: absolut;
links: 23%;
oben: 25 %;
}
._Grenze{
Zeilenhöhe: 145px;
Textausrichtung: zentriert;
Schriftgröße: 40px;
Schriftstärke: fett;
-webkit-text-fill-color: transparent;
Hintergrundbild: -webkit-linear-gradient(links,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
Hintergrundgröße: 200 %, 100 %;
-webkit-background-clip: Text;
-webkit-animation: Wort 5s linear unendlich;
}
@keyframes Wort {
0 % {Hintergrundposition: 0 0}
100 % {Hintergrundposition: -100 % 0}
}
</Stil>
</Kopf>
<Text>
<div Klasse="_borderWrap">
<div class="_border">Ihr Name</div>
</div>
</body>
</html>Effektbild:
„Ihr Name“ ist der Fließtext, den ich erstellt habe, aber der Screenshot ist statisch. Wenn Sie den dynamischen Effekt sehen möchten, müssen Sie den Code selbst ausführen! Beachten Sie, dass es beim Erstellen von fließendem Text mehrere wichtige Punkte zu beachten gibt: Die Textfüllfarbe wird im Allgemeinen auf transparent eingestellt. Verwenden Sie dann Hintergrundbild und Verlaufsfarben, um die Hintergrundfarbe des Textes festzulegen. Verwenden Sie den Hintergrundclip, um die Texterfassung zu erreichen, und verwenden Sie dann die Hintergrundgröße, um den Hintergrund zu erweitern, damit bei der Verwendung einer Animation der Animationseffekt erzielt werden kann. Zusammenfassen Oben ist das Text-Fill-Color-Attribut in CSS3, das ich Ihnen vorgestellt habe. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Webentwickler sind besorgt über die Koexistenz von IE7 und IE8
>>: So stellen Sie HBase mit Docker bereit
Artikel empfehlen
Einführung in Spark und Vergleich mit Hadoop
Inhaltsverzeichnis 1. Spark vs. Hadoop 1.1 Nachte...
Detaillierte Erläuterung der Vue3-Kapselungsfunktion für Nachrichtenaufforderungsinstanzen
Inhaltsverzeichnis Vue3-Kapselungsnachrichten-Ein...
Beispielanalyse zum Beheben von Problemen in historischen Linux-Images
Fix für Probleme mit historischen Linux-Images De...
Zabbix überwacht den Prozess der Linux-Systemdienste
Zabbix erkennt automatisch Regeln zur Überwachung...
Analyse der Probleme und Lösungen beim Importieren großer Datenmengen in MySQL
Im Projekt stoßen wir häufig auf das Problem, gro...
So erweitern Sie Vue Router-Links in Vue 3
Vorwort Das Tag <router-link> ist ein großa...
Implementierung der Header-Informationen für Nginx-Operationsantworten
Voraussetzung: Sie müssen das Modul ngx_http_head...
CSS-Schreibstandards und -Reihenfolge teilen [für alle empfohlen]
CSS-Schreibreihenfolge 1. Positionsattribute (Pos...
Tomcat Server Erste Schritte Super ausführliches Tutorial
Inhaltsverzeichnis 1. Einige Konzepte von Tomcat ...
Eine vorläufige Studie zu zusammengesetzten Primärschlüsseln und gemeinsamen Primärschlüsseln in SQL-Anweisungen
1. Zusammengesetzter Primärschlüssel Der sogenann...
Praktische Erfahrung bei der Optimierung von MySQL-Tabellen mit mehreren zehn Millionen Daten
Vorwort Lassen Sie es mich hier zunächst erklären...
Implementierung von Zugriffskontrolle und Verbindungsbeschränkung basierend auf Nginx
Vorwort Das integrierte Modul von Nginx unterstüt...
So implementieren Sie ein Hover-Dropdown-Menü mit CSS
Wie üblich werde ich heute über einen sehr prakti...
Linux-System zum Anzeigen von CPU, Maschinenmodell, Speicher und anderen Informationen
Während der Systemwartung müssen Sie möglicherwei...
Erfahren Sie, wie Sie einen Hadoop 3.x-Pseudocluster auf der Tencent Cloud erstellen
1. Umweltvorbereitung CentOS Linux Version 7.5.18...