background-clip 实现字体渐变效果

Posted 2021-01-02 karila

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