卡拉OK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
margin: 100px auto;
width: 550px;
height: 80px;
border: 1px solid #000;
text-align: center;
font-size: 40px;
font-weight: bold;
letter-spacing: 10px;
line-height: 80px;
border: 1px solid #000;
box-sizing: border-box;
background-color: red;
color: transparent;
-webkit-background-clip: text;
/*将背景色剪切至文字区域*/
background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2525304192,713814178&fm=27&gp=0.jpg");
background-repeat: no-repeat;
/*背景图片可以喝背景色共存*/
background-position: -550px 0;
/*设置背景图片位置*/
animation: move 6s linear 0s infinite normal;
}
@keyframes move {
from{
background-position: -550px 0;
}
to{
background-position: 0px 0;
}
}
</style>
</head>
<body>
<div>伤过的心,就像玻璃碎片</div>
</body>
</html>
网友评论