首页 > 代码库 > 犀利的background-clip:text,实现K歌字幕效果
犀利的background-clip:text,实现K歌字幕效果
今天学到了一个新的CSS3属性,更准确的说是属性值,那就是background-clip:text。利用此属性值可以制作出很神奇的效果。可惜只有chrome支持,不过今天可以先来玩玩这个属性。
<style></style> 先来介绍下background-clip吧,它的作用是对背景图片进行裁剪,取值有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;}
看效果:
一盏离愁 孤单伫立在窗口
可以很好解决上面的两个问题。当然用css3的方式也有问题的,那就是我们喜闻乐见的,不!兼!容!所以这里也只能是玩一玩了,当做一个思路。
犀利的background-clip:text,实现K歌字幕效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。