犀利的background-clip:text，实现K歌字幕效果

最新推荐文章于 2024-08-25 21:20:54 发布

天空神话

最新推荐文章于 2024-08-25 21:20:54 发布

阅读量587

点赞数

分类专栏： JavaScript 前端开发

前端开发同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

JavaScript

28 篇文章 1 订阅

订阅专栏

文章来源：https://www.cnblogs.com/lvdabao/p/background-clip-text.html

今天学到了一个新的CSS3属性，更准确的说是属性值，那就是background-clip:text。利用此属性值可以制作出很神奇的效果。可惜只有chrome支持，不过今天可以先来玩玩这个属性。

　　先来介绍下background-clip吧，它的作用是对背景图片进行裁剪，取值有content-box|padding-box|border-box，即对哪一个盒子之外的背景进行裁剪。看下面的例子就明白了：

美女

content-box
padding-box
border-box

　　以上三个取值很自然可以想到，但它还有另外一个取值有点让人惊艳，那就是text，它可以把文本内容之外的背景给裁剪掉。比如我们把上面的例子中写上文字：

美女

content-box
padding-box
border-box
text

　　背景内容只裁剪出了文字中的，是不是很神奇~不过这里需要和另外一个css3属性配合使用，它就是-webkit-text-fill-color: transparent; 它是用来设置文字的填充色的，作用和指定color是一样的，不过它有一个取值非常有用：transparent，可以把文字填充色设为透明，这样的话就可以漏出后面背景的颜色了，也就是“文字镂空”效果。

这样一来，要实现一个渐变色文字就很容易了，我们只需要用css3的渐变设置背景色即可，让后让文字来把背景给镂空显示出来。非常简单，这里有一个例子： http://trentwalton.com/bgclip/

这里我又想到了一个实际用途，那就是实现K歌的字幕效果，文字颜色随进度而变化，需要做到同一个字上面有不同的颜色，像下面这张图：

　　以前我们要做这样的效果，可能需要两个元素来，重叠起来，不断改变上面的元素的宽度来慢慢遮住下面，以此来模拟一种进度效果，如下是用两个元素实现的：

一盏离愁孤单伫立在窗口

　　这样做有几个缺陷：

1. 一段文字需要写两遍，用两个元素

2. 用户想要复制歌词时，无法完全选中这一行的文字。（因为确实不是同一行）

　　既然我们可以用文字镂空出背景色来了，要实现这个效果也就相当容易了，只需一个div，css代码如下：

@-webkit-keyframes loop{
     0%{background-position: -800px 0;}
     100%{background-position: -0 0;}
}
.text2{
     width: 800px;
     height: 78px;
     line-height: 78px;
     font-size: 40px;
     font-family: '微软雅黑';
     font-weight: bold;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-color: red;
     background-image:url(bg.jpg);
     background-repeat:no-repeat;
     background-position: -800px 0;
     -webkit-animation:loop 10s linear infinite;
}