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


Posted in HTML / CSS onJune 02, 2020

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

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

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

实现思路:

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

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

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

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

HTML代码:

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

CSS代码:

@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代码:

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

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

总结

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

HTML / CSS 相关文章推荐
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 #HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 #HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 #HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 #HTML / CSS
css3的focus-within选择器的使用
May 11 #HTML / CSS
CSS3实现渐变背景兼容问题
May 06 #HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 #HTML / CSS
You might like
php+ajax实现无刷新分页的方法
2014/11/04 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
jsonp原理及使用
2013/10/28 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
JS中的多态实例详解
2017/10/15 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
教师队伍管理制度
2014/01/14 职场文书
食品安全主题班会
2015/08/13 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
500字作文之周记
2019/12/13 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python