CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020-06-20 11:47
2251 查看
播放音乐时,歌词会随歌曲的进度逐渐填充颜色,不是逐字改变颜色,而是从左向右横向逐个像素改变的,也就是说会出现一个字的左右两边是不同颜色的效果。
这个效果通过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文字颜色填充内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 02-UILabel比例颜色填充之歌词效果实现
- Win32使用剪切区域实现酷狗动态歌词特效:动态歌词颜色滚动覆盖效果
- android实现文字渐变效果和歌词进度的效果
- android实现文字渐变效果和歌词进度的效果
- jQuery动态添加.active 实现导航效果代码思路详解
- Android的实现文字渐变效果和歌词进度的效果
- jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
- textview中点击效果实现,比如点击textview中实现图片和文字的颜色变化(类似于button)
- 纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果
- CSS3:animation实现闪亮效果和位移背景颜色变化
- CSS3下的渐变文字效果实现
- 用CSS3可以很简单地实现文字渐变效果
- 分享一个CSS3实现的动态内容标签页切换效果教程
- js实现文字动态显示效果
- android自定义圆形进度条,实现动态画圆效果
- jQuery+canvas实现的球体平抛及颜色动态变换效果
- android按钮被点击文字颜色变化效果
- CSS3实现3D文字动画效果
- android按钮被点击文字颜色变化效果
- Html+CSS3技术实现动画、天气图标动态效果 效果很酷