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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 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.MVC的模板标签系统(三)
2006/09/05 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
Python中文编码那些事
2014/06/25 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python中偏函数用法示例
2018/06/07 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
零基础学python应该从哪里入手
2020/08/11 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
大专自我鉴定范文
2013/10/01 职场文书
中学生差生评语
2014/01/30 职场文书
实习老师离校感言
2014/02/03 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
质量提升方案
2014/06/16 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技