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. linux 实时监控网速脚本（转）

    #!/bin/bash ethn=$ while true do RX_pre=$(cat /proc/net/dev | grep $ethn | sed 's/:/ /g' | awk '{pri ...

  2. 解决若依linux启动ERROR - unregister mbean error javax.management.InstanceNotFoundException: com.alibaba.druid:type=

    项目中使用druid对数据库连接池进行管理,在本地及测试环境均无问题,但是上了生产环境后,每当tomcat第一次启动时,日志未报错,但是页面总是出不来,在关闭tomcat时,看日志,发现报错如下: E ...

  3. python-- python threadpool 的前世今生

    引出 首先需要了解的是threadpool 的用途,他更适合于用到一些大量的短任务合集,而非一些时间长的任务,换句话说,适合大量的CPU密集型短任务,那些消耗时间较长的IO密集型长任务适合用协程去解决 ...

  4. 巧用List.stream()方法对List做处理

    List.steam()的强大之处在此不做赘述. 直接进入主题: 1.过滤Bean List中,某些字段等于指定值的所有行 List<Member> list = itemsArray.t ...

  5. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器版本打包方法介绍

    EasyDSS流媒体解决方案是一套集流媒体点播.转码.管理.直播.录像.检索.时移回看于一体的一套完整的商用流媒体解决方案.EasyDSS软件以压缩包的形式提供给客户使用,同时支持Linux和 Win ...

  6. ABP .NETCore更新数据库时一直连接的之前数据库

    使用Update-Database -Verbose更新数据库时,在appsettings.json配置文件中已修改为新的连接字符串,但是使用命令更新数据库时仍然连接的是之前的数据库. 后来把代码移至 ...

  7. Centos7——Firefox浏览器个性化配置调教

    因为谷歌浏览器无法正常登陆帐号,只能切换到火狐浏览器 默认浏览器我使用的是bing搜索 1.隐藏顶部标题栏 顶部标题栏真的占地方,所以直接选择隐藏 点击设置->自定义customize-> ...

  8. es6 学习小计

    es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这称之为解构:

  9. canal使用

    报错信息:com.alibaba.druid.pool.DruidDataSource - testWhileIdle is true, validationQuery not set 解决方法: 找 ...

  10. 验证Prometheus alertmanager邮件发送

    新环境上配置alertmanager时出现了“Client was not authenticated to send anonymous mail during MAIL FROM”错误,但老环境上 ...