Detailed explanation of the idea of ​​implementing dynamic effect of lyrics progress text color filling change using CSS3

When playing music, the lyrics will gradually fill in color as the song progresses. The color does not change word by word, but rather changes horizontally pixel by pixel from left to right. In other words, the left and right sides of a word will appear to be different colors.

This effect can be achieved through CSS3.

Implementation ideas:

1. Background fills a background color and the color to be changed

2. -webkit-background-clip:text; cuts out the background of the text, which means the empty text

3. -webkit-text-fill-color:transparent; Make the cutout text transparent so that the background color can be seen through the cutout shape. At this time, the background color is the color of the font.

4. background-size:0 100%; Set the background width to 0, and then change the background width through the channel to achieve the text color reading effect.

HTML code:

<div style="padding:15% 35%; text-align:center;">
    <span class="text">Fill text color from left to right</span>
</div>

CSS code:

@keyframes scan {
	0% {
		background-size:0 100%;
	}
	100% {
		background-size:100% 100%;
	}
}
.text {
	background:#7e7e7e -webkit-linear-gradient(left, #fff, #fff) no-repeat 0 0;
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
	background-size:0 100%;
}
.load {
	background-size:100% 100%;
	animation: scan 5s linear;
}

jQuery code:

window.onload = function(){
    $('.text').addClass('load');
}

Note: The effect achieved by the above code is only supported by webkit browsers

Summarize

This concludes this article on how to use CSS3 to achieve dynamic effects of changing text color fill in lyrics progress. For more relevant CSS3 text color filling content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!