犀利的background-clip:text,实现K歌字幕效果
padding-box
border-box
padding-box
border-box
text

@-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;
}
看效果:
犀利的background-clip:text,实现K歌字幕效果的更多相关文章
- python爬取全名k歌
python3 爬取全名k歌 代码: import re import requests import ssl ssl._create_default_https_context=ssl._creat ...
- 在香港用什么软件可以唱歌?香港K歌app推荐
KTV的源头来自于日本,KTV是Karaok TV的缩写.随着互联网时代越来越发达,手机K歌成了很多人会选择的方式,那么在香港有什么好用的K歌软件呢?这里qt6小编给大家推荐几款好用的,让你足不出户即 ...
- 【收藏】轻松导出全民K歌里任何人录制的短视频(MV)、歌曲的方法
有一次想把她在全民K歌里唱过的所有歌下载到电脑上,然后合成一个视频.但不知道怎么导出全民K歌里的歌曲,经过各种百度Google终于找到了一个用起来很简单的工具.不仅可以下载保存任何人录制的歌曲,还可以 ...
- python3爬取全民K歌
Python3爬取全民k歌 环境 python3.5 + requests 1.通过歌曲主页链接爬取 首先打开歌曲主页,打开开发者工具(F12). 选择Network,点击播放,会发现有一个请求返回的 ...
- 数据结构与算法实验题 9.1 K 歌 DFS+剪枝
数据结构与算法实验题 K 歌 ★实验任务 3* n 个人(标号1~ 3 * n )分成 n 组 K 歌.有 m 个 3 人组合,每个组合都对应一个分数,你能算出最大能够得到的总分数么? ★数据输入 输 ...
- anyRTC 重磅推出在线实时 K 歌解决方案
在线音乐领域一直是各大资本巨头投资的热点,从抢占版权到现在的"云上之争", 主流平台的战火从版权资源转向创新领域扩延.而如今,在线K歌正在成为抢占"云音乐"市场 ...
- 零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图 ...
- [ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果
语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number numbe ...
- Andorid Clip 实现自定义的进度条效果实例
Android该系统提供了一个水平进度条为我们展现了运行使用进展情况,水平进度条显示用于运行进度Clip Drawable技术 下面我们通过一个具体的例子来说明Clip Drawable使用. 还有我 ...
随机推荐
- Jmeter测试结果分析
*.jtl文件内容: 请求发出的绝对时间,响应时间,请求的标签,返回码,返回消息,请求所属的线程,数据类型,是否成功,字节, 响应时间 1458294513309, 382 ...
- ZOJ3792_Romantic Value
给出图,使得两点无流量,剩余其他边的总容量与删除边数的比值. 要机智啊... 因为原图给的边数不超过1000,容量也不超过1000,可以这样把边的容量变为2000*c+1.这样跑出最大流后,最大流除以 ...
- 验证radio 是否被选中
var radioType=document.getElementsByName("radioType"); var isCheckRadio=false; for(v ...
- Java中实现PHP中的urlencode与rawurlencode
php手册中对urlencode这样说明 在java中 URLEncoder做了这样注释 也就是说java中对星号"*"是不进行编码的 也就是说URLEncoder之后还是&quo ...
- SQL Server简洁查询正在运行的进程SQL
通常我们可以使用 sp_who2 我们希望更加简洁的信息,下面这个查询使用系统表sys.sysprocesses,以及sys.dm_exec_sql_text做OUTER APPLY. T-SQL是这 ...
- java 单利模式
首先何为单利模式: 单利模式即多次调用同一个对象的时候,只有一个实例(这里所谓的实例就是,假如创建了两个对象,它们的hashCode相同) 下面是相关代码: 1 创建一个对象Singleton类 pa ...
- webkit浏览器css设置滚动条
主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scroll ...
- 搜索引擎 ElasticSearch 之 步步为营1 【环境搭建&初识ElasticSearch】
1.下载ElasticSearch a.下载Java环境JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloa ...
- Connect to EC2 if losing Private Key
http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#replacing-lost-key-pair
- [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_ ...