今天学到了一个新的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;
}

  看效果:

一盏离愁 孤单伫立在窗口
   可以很好解决上面的两个问题。当然用css3的方式也有问题的,那就是我们喜闻乐见的,不!兼!容!所以这里也只能是玩一玩了,当做一个思路。

犀利的background-clip:text,实现K歌字幕效果的更多相关文章

  1. python爬取全名k歌

    python3 爬取全名k歌 代码: import re import requests import ssl ssl._create_default_https_context=ssl._creat ...

  2. 在香港用什么软件可以唱歌?香港K歌app推荐

    KTV的源头来自于日本,KTV是Karaok TV的缩写.随着互联网时代越来越发达,手机K歌成了很多人会选择的方式,那么在香港有什么好用的K歌软件呢?这里qt6小编给大家推荐几款好用的,让你足不出户即 ...

  3. 【收藏】轻松导出全民K歌里任何人录制的短视频(MV)、歌曲的方法

    有一次想把她在全民K歌里唱过的所有歌下载到电脑上,然后合成一个视频.但不知道怎么导出全民K歌里的歌曲,经过各种百度Google终于找到了一个用起来很简单的工具.不仅可以下载保存任何人录制的歌曲,还可以 ...

  4. python3爬取全民K歌

    Python3爬取全民k歌 环境 python3.5 + requests 1.通过歌曲主页链接爬取 首先打开歌曲主页,打开开发者工具(F12). 选择Network,点击播放,会发现有一个请求返回的 ...

  5. 数据结构与算法实验题 9.1 K 歌 DFS+剪枝

    数据结构与算法实验题 K 歌 ★实验任务 3* n 个人(标号1~ 3 * n )分成 n 组 K 歌.有 m 个 3 人组合,每个组合都对应一个分数,你能算出最大能够得到的总分数么? ★数据输入 输 ...

  6. anyRTC 重磅推出在线实时 K 歌解决方案

    在线音乐领域一直是各大资本巨头投资的热点,从抢占版权到现在的"云上之争", 主流平台的战火从版权资源转向创新领域扩延.而如今,在线K歌正在成为抢占"云音乐"市场 ...

  7. 零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果

    原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图 ...

  8. [ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果

      语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number numbe ...

  9. Andorid Clip 实现自定义的进度条效果实例

    Android该系统提供了一个水平进度条为我们展现了运行使用进展情况,水平进度条显示用于运行进度Clip Drawable技术 下面我们通过一个具体的例子来说明Clip Drawable使用. 还有我 ...

随机推荐

  1. Jmeter测试结果分析

    *.jtl文件内容: 请求发出的绝对时间,响应时间,请求的标签,返回码,返回消息,请求所属的线程,数据类型,是否成功,字节,             响应时间 1458294513309,   382 ...

  2. ZOJ3792_Romantic Value

    给出图,使得两点无流量,剩余其他边的总容量与删除边数的比值. 要机智啊... 因为原图给的边数不超过1000,容量也不超过1000,可以这样把边的容量变为2000*c+1.这样跑出最大流后,最大流除以 ...

  3. 验证radio 是否被选中

    var radioType=document.getElementsByName("radioType");    var isCheckRadio=false;    for(v ...

  4. Java中实现PHP中的urlencode与rawurlencode

    php手册中对urlencode这样说明 在java中 URLEncoder做了这样注释 也就是说java中对星号"*"是不进行编码的 也就是说URLEncoder之后还是&quo ...

  5. SQL Server简洁查询正在运行的进程SQL

    通常我们可以使用 sp_who2 我们希望更加简洁的信息,下面这个查询使用系统表sys.sysprocesses,以及sys.dm_exec_sql_text做OUTER APPLY. T-SQL是这 ...

  6. java 单利模式

    首先何为单利模式: 单利模式即多次调用同一个对象的时候,只有一个实例(这里所谓的实例就是,假如创建了两个对象,它们的hashCode相同) 下面是相关代码: 1 创建一个对象Singleton类 pa ...

  7. webkit浏览器css设置滚动条

    主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scroll ...

  8. 搜索引擎 ElasticSearch 之 步步为营1 【环境搭建&初识ElasticSearch】

    1.下载ElasticSearch a.下载Java环境JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloa ...

  9. Connect to EC2 if losing Private Key

    http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#replacing-lost-key-pair

  10. [UCSD白板题] Huge Fibonacci Number modulo m

    Problem Introduction The Fibonacci numbers are defined as follows: \(F_0=0\), \(F_1=1\),and \(F_i=F_ ...