text-fill-color是什么意思呢？单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color和color两个属性，则text-fill-color会覆盖掉color的值。

由于text-fill-color是css3的新属性，一说到css3新属性，大家肯定就会问兼容效果如何呢？？嘿嘿，只能毫不留情的说，兼容性很差呀，，只适用于webkit内核的浏览器有效果。。很可惜啊！！不过它虽然兼容性差，但是却可以制作很炫酷的文字效果，比如说流光文字，镂空文字等等。

制作流光文字，单单使用text-fill-color可是不行呀，还需要结合css3的animation来实现动画效果.下面直接上代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{margin: 0;padding: 0;}

         ._borderWrap{

             width: 180px;

             height: 150px;

             position: absolute;

             left: 23%;

             top: 25%;

         }

         ._border{

             line-height: 145px;

             text-align: center;

             font-size: 40px;

             font-weight: bolder;

             -webkit-text-fill-color: transparent;

             background-image:  -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));

             background-size: 200%,100%;

             -webkit-background-clip: text;

             -webkit-animation: word 5s linear infinite ;

         }

         @keyframes word {

             0%{background-position: 0 0}

             100%{background-position: -100% 0}

         }

     </style>

 </head>

 <body>

         <div class="_borderWrap">

             <div class="_border">你的名字</div>

         </div>

 </body>

 </html>

效果图：

“你的名字”就是制作的流光文字，只不过截图是静态的，想看动态效果需要自己运行代码哟！

注意，制作流光文字有几个要点：text-fill-color一般设置为transparent（透明色），然后利用background-image和渐变颜色来设置文字的背景色，利用background-clip来实现文字的截取，再利用background-size设置扩大背景，已使运用animation的时候能达到动画的效果等。

css3 text-fill-color属性的更多相关文章

  1. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  2. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  3. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  4. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  5. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  6. CSS的color属性并非只能用于文本显示

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过 ...

  7. winform中ComboBox实现text和value，使显示和值分开，重写text和value属性

    winform的ComboBox中只能赋值text,显示和值是一样的,很多时候不能满足根本需要,熟悉B/S开发的coder最常用的就是text和value分开的,而且web下DropDownList本 ...

  8. 数据库表中存在Text类型的属性时，写sql语句时需要注意喽！

    之前,习惯性地写查询语句时,查询条件用“=”判断.今天写程序的时候,查询时突然报了一个错误:数据类型text 和varchar 在equal to 运算符中不兼容.查看了一下数据库发现,其中有一个属性 ...

  9. CSS3：不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  10. 自绘按钮,添加Color属性（转载）

    在标准的Windows程序中所有按钮均没有颜色.因此Delphi提供的所有按钮组件也均无颜色属性,有时你可能做了一个五颜六色的程序界面,而按钮颜色可能很不相称. 在此本人提供一种用自定义组件制作有颜色 ...

随机推荐

  1. 关于RSA汇总

    写在前面 安全测试需要, 后台数据需要签名, 前台验签, 于是有了这篇hao123. 正文 jsrsasign https://github.com/kjur/jsrsasign jsrsasign使 ...

  2. gcc 编译两个so其中soA依赖soB

    有两个so,其中soB中调用soA: 那么我们打包soB的时候连接soA: 在打包test程序的时候连接soB,此时soB会自动查找依赖的soA: 如下测试 在编译之前指定环境变量:export LD ...

  3. t6_sumdoc

    C:\Users\Administrator\Documents\sumdoc 2019\sumdoc t6 final\sumdoc t615C:\Users\Administrator\Docum ...

  4. centos7安装Redis5.0.5

    1.下载redismkdir /home/redis/cd /home/redis/wget http://download.redis.io/releases/redis-5.0.5.tar.gzt ...

  5. 【KakaJSON手册】08_其他用法

    除了完成JSON和Model的转换之外,KakaJSON内部还有很多实用的功能,有些也开放为public接口了 遍历属性 struct Cat { var age: Int = 0 let name: ...

  6. 如何画出高级感的曼哈顿图，Manhattan++工具介绍

    欢迎来到"bio生物信息"的世界 BMC Bioinformatics前几天发布了一个画曼哈顿图的工具Manhattan++, 这个名字很好理解,Manhattan的升级版. 这个 ...

  7. iOS - 在xib中UILabel文字如何换行

    在换行的位置按住Option + Enter键即可换行

  8. fidder配置 https设置 手机客户端

    1.APP抓包时的手机代理设置: 让手机和PC在同一个局域网下面: 1.如果PC是笔记本,让iOS或Android手机.iPhone或笔记本它们连接同一个wifi网络即可(自己试了不行,未找到原因). ...

  9. (转) C#使用ODP.NET（Oracle.ManagedDataAccess.dll）操作Oracle数据库

    原贴链接:https://www.cnblogs.com/mq0036/p/11052359.html C#使用ODP.NET(Oracle.ManagedDataAccess.dll)操作Oracl ...

  10. Unable to create application 异常

      这个错误是空指针,但你怎么去找就是找不到为什么会空指针 这时,你要去检查Application 中是否有重写的方法例如这个 @Override protected void attachBaseC ...