CSS : text-fill-color属性
语法：
取值：
说明：
检索或设置对象中的文字填充颜色。
示例：
.text-fill-color{
width:950px;
margin:0 auto;
background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font:bold 95px/1.231 georgia,sans-serif;
text-transform:uppercase;
}
</style>
</head>
<body>
<div class="text-fill-color">text-fill-color</div>
</body>
text-fill-color是CSS3中的属性，表示文字颜色填充，实现的效果基本上与color一样，目前仅webkit核心的浏览器下支持此属性，与之类似的还有一个属性就是text-stroke表示文本描边，本文主要展示text-fill-color的应用，text-stroke暂时扔在一边。从某种程度上讲text-fill-color与color基本上的作用是一样的，如果同时设置color与text-fill-color属性，显然是颜色填充覆盖本身的颜色，也就是文字显示text-fill-color设置的颜色（当然在浏览器支持text-fill-color属性的情况下）。虽然说，text-fill-color≈color，但是毕竟还是有差别的，就表现效果上来讲，text-fill-color还支持一个transparent属性，也就是透明填充。而这一属性可以实现一些精湛的UI表现，例如文字遮罩。
此文字遮罩动画效果的实现单单使用text-fill-color属性是实现不了了，此效果的实现还配合了另外一个CSS3属性就是animate，CSS3动画属性，这也是目前仅webkit核心浏览器支持的属性，animate动画类型与名称很多，这里应用的动画名是masked-animation，也就是“动画-遮罩”的意思，配合animate固定的一些参数（例如时间，缓动模式）等，就可以实现本文所示的效果了。
文字遮罩例子
CSS代码：
.masked{
background:url(../image/paint.png);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
-webkit-animation-name:masked-animation;
-webkit-animation-duration:40s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
color:#fff;
}
@-webkit-keyframes masked-animation {
0% {background-position:left bottom;}
100% {background-position:right bottom;}
}HTML代码：
<div class="masked">
<h4>这是一段可选文字</h4>
</div>
转自http://www.css88.com/book/css/properties/only-webkit/text-fill-color.htm
http://www.zhangxinxu.com/wordpress/2010/06/css3-text-fill-color简介及应用展示/
扫一扫
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
