background-clip 实现字体渐变效果
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的属性值有: