&nbs p;
一、text-fill-color简介
text-fill-color 是 CSS 3中的属性，表示 文字颜色 填充，实现的效果基本上与 color 一样，目前仅 webkit 核心的浏览器下支持此属性，与之类似的还有一个属性就是 text- stroke 表示文本描边，本文主要展示 text-fill-color 的应用， text -s troke 暂时扔在一边。从某种程度上讲 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应用实例
文字遮罩可以说是Flash盛行时代的流行效果之一，当我在 大学 着迷于Flash动效 制作 那会儿，压根没有想到可以使用CSS实现几乎相媲美的效果。废话少说，先看效果（demo + 截图 + video）：
您可以狠狠地点击这里：text-fill-color 文字遮罩动画demo
此demo效果需在webk IT 核心的浏览器下才能看到预设的效果，例如Ch rom e浏览器或是Safari浏览器（window下亦可），或是 搜狗 高速浏览器切换到高速模式（应用webkit内核）（见下图）：
如果您手上没有webkit核心的浏览器，您也可以预览下面我 录制 的简短的效果视频， 宽 度有限，视频区域仅覆盖最后几个文字：
实现
此文字遮罩动画效果的实现单单使用 text-fill-color 属性是实现不了了，此效果的实现还配合了另外一个CSS3属性就是 ani MATE ，CSS3动画属性，这也是目前仅webkit核心浏览器支持的属性， animate 动画类型与名称很多，这里应用的动画名是 masked-animation ，也就是“动画-遮罩”的 意思 ，配合 animate 固定的一些参数（例如时间，缓动模式）等，就可以实现本文所示的效果了。关于CSS3 animate 的具体属性，您可以参见我之前的“CSS3 animate实现图片墙3D翻转效果”这篇 文章 ，其中有对 animate 属性较为详细的介绍。
代码
本文遮罩部分的CSS代码如下，希望能够对您的理解有所帮助：
.masked{ background:url(http://www.zhangxinxu .COM /study/image/p ai nt.png); -webkit -t ext-fill-color:transparent; -webkit-background-clip:text; -webkit-animation-n am e:masked-animation; -webkit-animation-duration:40s; -webkit-animation -i teration-count:infinite; -webkit-animation-timing-function:linear; color: # fff; } @-webkit-keyframes masked-animation { 0% {background-position:left bottom;} 100% {background-position:right bottom;} } 三、插播新闻：韩国平了乌拉圭
刚从微薄获得消息，韩国队进球了，扳平了乌拉圭，这下球好看了。
四、结语
可能去年这个时候，我还对CSS3有点不屑，不就是增加了一个样式表现吗？但是随着对CSS3越发的 了解 ，深深的感受到CSS3的潜力就像是鸣人体内的九尾妖狐一样，能量巨大，不可限量。随着CSS3时代的到来，web界将会是前端工程师群雄逐鹿的景况，设计+智慧+技 术 ，人类的 生活 将由我们 改变 。我等待着那一天……
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS3 text-fill-color简介及应用展示 全部内容，希望文章能够帮你解决 html5教程-CSS3 text-fill-color简介及应用展示 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS3 text-fill-color简介及应用展示的详细内容...