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
Handbuch zur MySQL-Volltextindizierung
Die Volltextindizierung erfordert eine spezielle ...
Beispiel zum Entfernen eines JSON-Backslashs in PHP
1. Entfernen Sie Backslashes mit der Methode „str...
Front-End-Statusverwaltung (Teil 1)
Inhaltsverzeichnis 1. Was ist Front-End-Statusver...
Nginx-Praxis zur Optimierung hoher Parallelität
1. Notwendigkeit des Tunings Ich habe mich immer ...
Vue: Detaillierte Erklärung von Speicherlecks
Was ist ein Speicherleck? Ein Speicherleck bedeut...
So beheben Sie den Fehler beim Herstellen einer Verbindung zu MySQL unter Linux: Zugriff für Benutzer „root“@„localhost“ verweigert (mit Kennwort: JA)
Vorwort Kürzlich mit mysql /usr/local/mysql/bin/m...
H-Tags sollten bei der Erstellung von Webseiten sinnvoll verwendet werden
HTML-Tags haben spezielle Tags zur Handhabung des ...
MySQL 5.7.10 Installations- und Konfigurations-Tutorial unter Windows
MySQL bietet zwei verschiedene Versionen für unte...
Implementierung von Portalen und Fehlergrenzbehandlung in React
Inhaltsverzeichnis Portale Fehlergrenzenbehandlun...
Natives JS zur Implementierung eines Hover-Dropdown-Menüs
JS implementiert ein Hover-Dropdown-Menü. Dies is...
1 Minute Vue implementiert Rechtsklickmenü
Inhaltsverzeichnis Rendern Installieren Code-Impl...
mysql erhält das gestrige Datum, das heutige Datum, das morgige Datum und die Uhrzeit der vorherigen und der nächsten Stunde
1. Aktuelles Datum wählen Sie DATE_SUB(curdate(),...
So schreiben Sie mithilfe von Filtern transparentes CSS für Bilder
So schreiben Sie mithilfe von Filtern transparente...
Detaillierte Analyse von MySQL-Ausführungsplänen
Vorwort Als wir im vorherigen Interviewprozess na...
Drei Arten des HTML+CSS-Layouts (natürliches Layout/fließendes Layout/positioniertes Layout)
1. Natürliches Layout <br />Das Layout ohne ...