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. Maven编译中使用${env}与直接启动tomcat会报错的问题处理

    Maven编译中使用${env}与直接启动tomcat会报错的问题处理 在Run/Debug Configurations中,设置 Before lauch:Build, Build Artifact ...

  2. windows下安装zk

    1 下载安装包并解压 2 修改conf下配置文件名字 zoo_sample.cfg 文件名改为 zoo.cfg 3 启动zk zKServer.cmd 4启动客户端连接测试 zKCli.cmd 127 ...

  3. HttpClient get请求获取数据流

    HttpClient get请求获取数据流,将数据保存为文件 public String getStreamFile(String url) throws Exception { HttpClient ...

  4. Kubernetes平台环境搭建

    软件 版本 Linux操作系统 CentOS7.4 Kubernetes 1.12 Docker 18.xx-ce Etcd 3.x Flannel 0.10 角色 IP 组件 推荐配置 master ...

  5. 【Spring Boot学习之五】切面日志管理

    环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 一.log4j 常见方式:log4j.properties + org.apache.log4j.Logger比如:l ...

  6. Node.js实现PC端类微信聊天软件（四）

    Github StackChat 学习回顾 React和Electron结合 TypeError: fs.existsSync is not a function 在React组件里引入electro ...

  7. 2019 CSP-J 游记（CQ LNBS考场 的退役之战）

    T0.10 爆零之战 已经不是第一次参加NOIP了(哦,关于兔子也NOIP了) 这次比赛的话,感觉考场很温馨,键盘很舒适,老师很友善,下次还会来.(哦不,下次来不了了,即将提前退役[大雾]) 刚刚文化 ...

  8. javascript中 for in 、for 、forEach 、for of 、Object.keys().

    一 .for ..in 循环 使用for..in循环时,返回的是所有能够通过对象访问的.可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例.这里需要注意的是使用for-in返回的属性因各 ...

  9. SQL Server 从一组数字中随机获取一个数

    很多人在开发需求中想获取一个随机数,或者从一组数字中获取一个数, 这个需求很简单,而且有很多方式可以实现,下面就介绍几种常见的方式,以作为笔记或供有需要的人参考. 比如有一组数字: 57 59 63 ...

  10. Java基础---Java环境配置

    java 下载:https://www.java.com/zh_CN/ 1.Java安装:jdk9 2. JAVA_HOME 环境变量的配置 在DOS命令行下使用这些工具,就要先进入到JDK的bin目 ...