background-clip 实现字体渐变效果
(一)类似KTV字幕效果
@-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:linear-gradient(to right, red, green);
-webkit-background-clip: text;
color: transparent;
ps:
background-clip的属性值有:
content-box
padding-box
border-box
text