background-clip 实现字体渐变效果

background-clip 实现字体渐变效果

（一）类似KTV字幕效果

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

@-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; }

（二）渐变字

?

1 2 3

background:linear-gradient(to right, red, green); -webkit-background-clip: text; color: transparent;

　

ps:　

?

1

background-clip的属性值有：<br>  <input id="cb" type="radio" name="dctrl2" value="content-box"> <label for="cb">content-box</label> <br>  <input id="pb" type="radio" name="dctrl2" value="padding-box"> <label for="pb">padding-box</label> <br>  <input id="bb" type="radio" name="dctrl2" value="border-box"> <label for="bb">border-box</label> <br>  <input id="t" type="radio" name="dctrl2" value="text" checked="checked"> <label for="t">text</label>