Detaillierte Erläuterung der Idee zur Implementierung dynamischer Effekte für die Änderung der Textfüllungsfarbe im Liedtext mit CSS3

Beim Abspielen von Musik werden die Liedtexte im Verlauf des Liedes nach und nach eingefärbt. Die Farbe ändert sich nicht Wort für Wort, sondern horizontal Pixel für Pixel von links nach rechts. Mit anderen Worten: Die linke und rechte Seite eines Wortes erscheinen in unterschiedlichen Farben.

Dieser Effekt kann durch CSS3 erreicht werden.

Umsetzungsideen:

1. Hintergrund füllt eine Hintergrundfarbe und die zu ändernde Farbe

2. -webkit-background-clip:text; schneidet den Hintergrund des Textes aus, also den leeren Text

3. -webkit-text-fill-color:transparent; Machen Sie den ausgeschnittenen Text transparent, sodass die Hintergrundfarbe durch die ausgeschnittene Form sichtbar ist. Zu diesem Zeitpunkt ist die Hintergrundfarbe die Farbe der Schriftart.

4. Hintergrundgröße: 0 100 %; Setzen Sie die Hintergrundbreite auf 0 und ändern Sie dann die Hintergrundbreite über den Kanal, um den Textfarbleseeffekt zu erzielen.

HTML Quelltext:

<div Stil="padding:15% 35%; Textausrichtung:center;">
    <span class="text">Textfarbe von links nach rechts füllen</span>
</div>

CSS Code:

@keyframes scannen {
	0% {
		Hintergrundgröße: 0 100 %;
	}
	100 % {
		Hintergrundgröße: 100 % 100 %;
	}
}
.text {
	Hintergrund: #7e7e7e -webkit-linear-gradient(links, #fff, #fff) keine Wiederholung 0 0;
	-webkit-text-fill-color:transparent;
	-webkit-Hintergrundclip:Text;
	Hintergrundgröße: 0 100 %;
}
.laden {
	Hintergrundgröße: 100 % 100 %;
	Animation: Scan 5 s linear;
}

jQuery-Code:

fenster.onload = funktion(){
    $('.text').addClass('laden');
}

Hinweis: Der durch den obigen Code erzielte Effekt wird nur von WebKit-Browsern unterstützt.

Zusammenfassen

Damit ist dieser Artikel über die Verwendung von CSS3 zum Erzielen dynamischer Effekte durch Ändern der Textfarbe im Liedtextverlauf abgeschlossen. Weitere relevante Inhalte zur CSS3-Textfarbe finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!