CSS3实现歌词进度文字颜色填充变化动态效果的思路详解

播放音乐时，歌词会随 歌曲 的 进度 逐渐填充颜色，不是逐字 改变 颜色，而是从左向右横向逐个像素改变的，也就是说会出现一个字的左右两边是不同颜色的效果。

这个效果通过CSS3可以实现。

实现思路：

1、background填充一个 背景颜色 ，以及要变化的颜色

2、- webkit -background-clip:text;裁剪出文字的背景，即是楼空文字的 意思

3、-webk IT -t ext-fill-color:transparent;把裁剪缕空的文字弄透明，这样就可以通过缕空的形状看到背景颜色，这时背景颜色就是字体的颜色

4、 background-size :0 100%;设置背景的 宽 为0，然后通过通道改变背景的宽度，就可以实现 文字颜色 读词效果。

HT ML 代码：

<div style="padding:15% 35%; text-align: center ;">
    <span class="text">从左往右填充文字颜色</span>
</div>

CSS代码：

@keyfr am es scan {
	0% {
		background- Size: 0 100%;
	}
	100% {
		background -s ize:100% 100%;
	}
}
.text {
	background: # 7e7e7e -webkit-linear-gra die nt(left, #fff, #fff) no-re PE at 0 0;
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
	background-size:0 100%;
}
.load {
	background-size:100% 100%;
	animation: scan 5s linear;
}

jq uery代码：

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

注意：通过上面代码实现的效果，只支持webkit系浏览器

总结

到此这篇关于CSS3实现歌词进度文字颜色填充变化动态效果的思路详解的 文章 就介绍到这了,更多相关CSS3文字颜色填充内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS3实现歌词进度文字颜色填充变化动态效果的思路详解 全部内容，希望文章能够帮你解决 CSS3实现歌词进度文字颜色填充变化动态效果的思路详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS3实现歌词进度文字颜色填充变化动态效果的思路详解的详细内容...