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
Der Fallstrickrekord des Gummi-Rebound-Effekts der iOS WeChat H5-Seite
Geschäftliche Anforderungen Eines der Projekte, d...
Implementierungsanweisungen zur Duplikatsprüfung und Deduplizierung von MySQL-Daten
Es gibt einen Tabellenbenutzer und die Felder sin...
Detaillierte Erklärung der Sperrstruktur in MySQL
Mysql unterstützt 3 Arten von Sperrstrukturen Spe...
So stellen Sie HBase mit Docker bereit
Standalone-HBase, lassen Sie uns zuerst darüber s...
Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung
Mehrere Konzepte Zeilenbox: Eine Box, die eine In...
Detaillierte Erläuterung der Ausführung von SQL-Anweisungen (Übersicht über die MySQL-Architektur -> Abfrageausführungsprozess -> SQL-Analysereihenfolge)
Vorwort: Ich wollte schon immer wissen, wie eine ...
12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert
Wenn die DataSource-Eigenschaft eines DataGrid-Ste...
Drei Verwendungszwecke und Unterschiede von MySQL sind nicht gleich
Urteilssymbole werden in MySQL häufig verwendet, ...
Löschen Sie den Image-Vorgang von „none“ in Docker-Images
Da ich normalerweise den Befehl „Docker Build“ ve...
Testfragen und Referenzantworten zum Thema Webdesign und Produktion
<br />Test zu Webdesign und -produktion, Tei...
MySQL-Prozesssteuerung: IF()-, IFNULL()-, NULLIF()-, ISNULL()-Funktionen
In MySQL können Sie die Funktionen IF(), IFNULL()...
Detaillierte Erklärung der Lösung für das Problem, dass der Inhalt, auf den der src des Iframes verweist, nicht aktualisiert wird
Problembeschreibung html <iframe id="h5In...
vue+echarts realisiert den Flusseffekt der China-Karte (detaillierte Schritte)
@vue+echarts realisiert den Flusseffekt der China...
So richten Sie Nginx so ein, dass der Domänenname an den angegebenen Port weitergeleitet wird
Geben Sie /usr/local/nginx/conf ein sudo cd /usr/...
Verwendung von MySQL-Fuzzy-Abfragen (regulär, Platzhalter, integrierte Funktion)
Inhaltsverzeichnis 1. MySQL-Platzhalter-Fuzzy-Abf...