歌词跟进效果：
image.png
实现思想：
1.利用背景图片的位置，起到遮盖字体的效果
image.png
2.-webkit-background-clip:text 可以将背景裁剪为文字的形状
-webkit-background-clip:text 可以将背景裁剪为文字的形状
注意点:
-webkit-background-clip 是一个私有的属性, 并不是所有的浏览器都能够识别
//-ms代表【ie】内核识别码
//-moz代表火狐【firefox】内核识别码
//-webkit代表谷歌【chrome】/苹果【safari】内核识别码
//-o代表欧朋【opera】内核识别码
若不用 -webkit-background-clip:text,遮盖的效果如下，除了字体部分的背景图片没有被裁剪走。
image.png
采用-webkit-background-clip:text,后的效果
image.png
3.使用animation属性控制黑色背景图片的移动速度
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 800px;
height: 78px;
line-height: 78px;
font-size: 75px;
font-weight: bold;
/*border: 1px solid #000;*/
margin: 200px auto;
background-color: red;
color: transparent;
-webkit-background-clip: text;
background-image: url(img/text_bg.jpg);
background-repeat: no-repeat;
background-position: -800px 0;
/*keyname 持续时长 运动方式 无限执行 延迟时间 不需要往返动画*/
animation: loop 5s linear 0s infinite normal;
}
@keyframes loop{
from{
background-position: -800px 0;
}
to{
background-position: 0 0;
}
}
</style>
</head>
<body>
<div>伤过的心就像玻璃碎片</div>
</body>
</html>
我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com
网友评论