css3text-fill-color简介
text-fill-color是什么意思呢？单单从字⾯上来看就是“⽂本填充颜⾊”，不过它实际也是设置对象中⽂字的填充颜⾊，和color的效果很相似。如果同时设置text-fill-color和color两个属性，则text-fill-color会覆盖掉color的值。
由于text-fill-color是css3的新属性，⼀说到css3新属性，⼤家肯定就会问兼容效果如何呢？？嘿嘿，只能毫不留情的说，兼容性很差呀，，只适⽤于webkit内核的浏览器有效果。。很可惜啊！！不过它虽然兼容性差，但是却可以制作很炫酷的⽂字效果，⽐如说流光⽂字，镂空⽂字等等。
制作流光⽂字，单单使⽤text-fill-color可是不⾏呀，还需要结合css3的animation来实现动画效果.下⾯直接上代码：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6<style>
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;
html动画效果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</style>
32</head>
33<body>
34<div class="_borderWrap">
35<div class="_border">你的名字</div>
36</div>
37</body>
38</html>
View Code
效果图：
“你的名字”就是制作的流光⽂字，只不过截图是静态的，想看动态效果需要⾃⼰运⾏代码哟！
注意，制作流光⽂字有⼏个要点：text-fill-color⼀般设置为transparent（透明⾊），然后利⽤background-image和渐变颜⾊来设置⽂字的背景⾊，利⽤background-clip来实现⽂字的截取，再利⽤background-size设置扩⼤背景，已使运⽤animation的时候能达到动画的效果等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。