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创建文字颜色渐变(CSS3 Text Gradient)

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

  2. css text gradient color, css fonts gradient color

    css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...

  3. [转] CSS3混合模式mix-blend-mode/background-blend-mode简介 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4819 一.关于混合模 ...

  4. CSS3混合模式mix-blend-mode/background-blend-mode简介 ，PS中叠加效果

    一.CSS3 mix-blend-mode 首先,要知道”blend-mode”就是混合模式的意思.那mix, 恩,我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML,还可以作用于SV ...

  5. sublime text 3 使用简介

    2014年1月22日 09:47:50 2用了一段时间感觉不错,就是自带的高亮显示匹配标签或者代码块儿时有点儿不清楚,所以一直是sublime 开PHP,notepad++开html 现在想只用一个编 ...

  6. Sublime text —— 自定义Color theme

    网上下载,XXX.tmTheme 样式,让后放置于 C:\Users\{用户名}\AppData\Roaming\Sublime Text 2\Packages\Color Scheme - Defa ...

  7. CSS3 target伪类简介

    CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...

  8. [CSS3] Text ellipsis

    Link: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow div{ white-space: now ...

  9. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  10. After Effects 图层属性及属性组结构详解

    根据结构类型的属性分类 在 After Effects 的脚本开发中,图层的属性可被区分为三种类型:PROPERTY.INDEXED_GROUP 和 NAMED_GROUP .通过使用app.proj ...

随机推荐

  1. sql sever 基础 建表

    ---恢复内容开始--- SQL Sever 基础以创建银行数据库bankDB为案例 1.创建数据库 1-1 创建文件夹用以存放数据库 1-2 创建建库bankDB 2.创建数据库 2-1.创建用户信 ...

  2. 【ppp-chap,pap,mp,mp-group】

    PPP链路端口验证(单){ PAP(明文): 主验证方: {local-user user_name:配置本地用户; password {simple||cipher}:配置验证密码; service ...

  3. vue 数组数据更新或者对象数据更新 但是页面没有同步问题

    1,使用set函数来设置数据. 2,你可以通过 $forceUpdate 来做这件事.在数据赋值之后 就直接调用 this.$forceUpdata()

  4. 在Liunx上搭建FTP并配置用户权限

    伴随着.Net Core的开源,公司前几天上了新的Liunx服务器,我在前几篇文章中介绍了如何搭建环境以及部署.Net Core应用. 然后,今天客户和我说想自己给网站做推广,需要用FTP链接我们的服 ...

  5. IDEA开发vue.js卡死问题

    在执行cnpm install后会在node_modules这个文件下面生成vue的相关依赖文件, 这个时候当执行cnpm run dev命令时,会导致IDEA出现卡死的问题,解决方法如下:

  6. java应用：csv文件的读写

    csv数据特点: csv是文本格式,一行数据是一条记录,每个单元之间用“,”隔开.csv数据可以用Excel打开. 读写csv文件的主要程序如下所示: import java.io.BufferedR ...

  7. python基础小知识，is和==的区别，编码和解码

    1.is和==的区别 1)id() 通过id()我们可以查看到一个变量表示的值在内存中的地址 >>> s1 = "Tanxu" >>> s2 = ...

  8. Python学习手册之Python异常和文件

    在上一篇文章中,我们介绍了 Python 的函数和模块,现在我们介绍 Python 中的异常和文件. 查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/9963 ...

  9. ABAP CDS ON HANA-(4)ヘッダー行編集

    Explicit Name List use in CDS We create a simple  CDS View like below. @AbapCatalog.sqlViewName: ‘ZS ...

  10. 修改mysql root密码的方法

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...