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. 没有上司的舞会（树形DP）

    题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...

  2. 【TOJ 1912】487-3279（hash+map）

    描述 Businesses like to have memorable telephone numbers. One way to make a telephone number memorable ...

  3. ABAP术语-Function Library

    Function Library 原文:http://www.cnblogs.com/qiangsheng/archive/2008/02/14/1068642.html Central reposi ...

  4. Spring初始介绍

    一.spring介绍 三层架构中spring位置: spring:对象的容器,相当于map容器,已经存好了相应的对象,而这三层对象(web层,service层,)进行创建时,不需要在进行new对象,s ...

  5. jdbc学习笔记03

    作业: 1. 学生表(id,age,name) 2. 插入学生 3. 修改学生 4. 删除学生 5. 查询学生 JavaBean 俗称简单的Java对象 javaBean满足以下三点 1.私有属性 2 ...

  6. ThinkPHP 5 整合支付宝微信支付（支付宝H5，微信H5、APP支付、公众号支付）

    因项目没有PC站所以没有写电脑网站支付. Pay.php支付控制器 <?php // +----------------------------------------------------- ...

  7. 微信小程序使用相机

    <view class="page-body"> <view class="page-body-wrapper"> <camera ...

  8. php 电商系统SKU库存设计

    sku 全称为:Stock Keeping Unit,是库存进出计量的基本单元. 我们一般会在电商网站基本都会看到 比如淘宝,JD 淘宝和JD的 方式可能不一样,因为我不清楚他们具体是如何设计的, J ...

  9. JavaSE 第二次学习随笔(关于内存的小题)

    class HelloA { public HelloA() { System.out.println("HelloA"); } { System.out.println(&quo ...

  10. C# 测量程序运行时间

    using System.Diagnostics; Stopwatch watch = new Stopwatch(); watch.Start(); /* 需要测量运行时间的程序 */ watch. ...