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>

 

posted @   karila  阅读(458)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何调试 malloc 的底层源码
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
阅读排行:
· 25岁的心里话
· 因为Apifox不支持离线,我果断选择了Apipost!
· 零经验选手,Compose 一天开发一款小游戏!
· Trae 开发工具与使用技巧
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示