text-fill-color是什么意思呢?单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色,和color的效果很相似。如果同时设置text-fill-color和color两个属性,则text-fill-color会覆盖掉color的值。
由于text-fill-color是css3的新属性,一说到css3新属性,大家肯定就会问兼容效果如何呢??嘿嘿,只能毫不留情的说,兼容性很差呀,,只适用于webkit内核的浏览器有效果。。很可惜啊!!不过它虽然兼容性差,但是却可以制作很炫酷的文字效果,比如说流光文字,镂空文字等等。
制作流光文字,单单使用text-fill-color可是不行呀,还需要结合css3的animation来实现动画效果.下面直接上代码:
1
2
3
4
5
Title6
7 *{margin:0;padding:0;}
8 ._borderWrap{
9 width:180px;
10 height:150px;
11 position:absolute;
12 left:23%;
13 top:25%;
14 }
15 ._border{
16 line-height:145px;
17 text-align:center;
18 font-size:40px;
19 font-weight:bolder;
20 -webkit-text-fill-color:transparent;
21 background-image:-webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
22 background-size:200%,100%;
23 -webkit-background-clip:text;
24 -webkit-animation:word 5s linear infinite;
25 }
26 @keyframes word{
27 0%{background-position:0 0}
28 100%{background-position:-100% 0}
29 }30
31
32
33
34
35 你的名字