css3 text-fill-color简介
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简介的更多相关文章
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- css text gradient color, css fonts gradient color
css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...
- [转] CSS3混合模式mix-blend-mode/background-blend-mode简介 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4819 一.关于混合模 ...
- CSS3混合模式mix-blend-mode/background-blend-mode简介 ，PS中叠加效果
一.CSS3 mix-blend-mode 首先,要知道”blend-mode”就是混合模式的意思.那mix, 恩,我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML,还可以作用于SV ...
- sublime text 3 使用简介
2014年1月22日 09:47:50 2用了一段时间感觉不错,就是自带的高亮显示匹配标签或者代码块儿时有点儿不清楚,所以一直是sublime 开PHP,notepad++开html 现在想只用一个编 ...
- Sublime text —— 自定义Color theme
网上下载,XXX.tmTheme 样式,让后放置于 C:\Users\{用户名}\AppData\Roaming\Sublime Text 2\Packages\Color Scheme - Defa ...
- CSS3 target伪类简介
CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...
- [CSS3] Text ellipsis
Link: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow div{ white-space: now ...
- css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
- After Effects 图层属性及属性组结构详解
根据结构类型的属性分类 在 After Effects 的脚本开发中,图层的属性可被区分为三种类型:PROPERTY.INDEXED_GROUP 和 NAMED_GROUP .通过使用app.proj ...
随机推荐
- jzoj100029. 【NOIP2017提高A组模拟7.8】陪审团（贪心，排序）
Description 陪审团制度历来是司法研究中的一个热议话题,由于陪审团的成员组成会对案件最终的结果产生巨大的影响,诉讼双方往往围绕陪审团由哪些人组成这一议题激烈争夺. 小 W 提出了一个甲乙双方 ...
- 搭建两个节点的大数据集群-1.hdfs集群
0.规划 两个节点: ip 部署的程序 备注 192.168.56.2/bigdata.lzf namenode,datanode,NodeManager,hive,presto,mysql, ...
- BC追踪
项目又要开始改造了,记录一下改造过程中碰到的坑和解决思路,避免以后回头看看自己的笔记都不知道写了什么. (一)敏感信息混淆 (二)活用ComponentScan (三)Swagger配置多项目共用 ( ...
- yii 自带RBAC
common:中加 'authManager' => [ 'class' => 'yii\rbac\DbManager', 'itemTable' => 'auth_item', ' ...
- ThinkPHP框架目录的介绍
library目录 Think目录 mvc
- Teen Readers【青少年读者】
Teen Readers Teens and younger children are reading a lot less for fun, according to a Common Sense ...
- C语言实现斐波那契数列
1.函数一用递归实现 2.函数二用循环实现 #include<stdio.h> #include<stdlib.h> #pragma warning(disable:4996) ...
- "Mon Dec 31 00:00:00 CST 2012" java日期装换 "yyyy-MM-dd"
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import ja ...
- （数据科学学习手札09）系统聚类算法Python与R的比较
上一篇笔者以自己编写代码的方式实现了重心法下的系统聚类(又称层次聚类)算法,通过与Scipy和R中各自自带的系统聚类方法进行比较,显然这些权威的快捷方法更为高效,那么本篇就系统地介绍一下Python与 ...
- POJ1679（次小生成树）
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 36692 Accepted: 13368 ...