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 ...
随机推荐
- javascript--自定义弹出登陆窗口（弹出窗）
web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对 ...
- 01javascript基础
1.JavaScript:直接写入 HTML 输出流 实例:(只能在 HTML 输出中使用 document.write.如果在文档加载后使用该方法,会覆盖整个文档) <!DOCTYPE htm ...
- 记js里codePointAt()方法返回的结果的含义。
经过<字符串的扩展>和<字符编码的那些事>这两篇文章的阅读,大概了解js里codePointAt方法返回结果的含义. var str='
- 八、USB驱动分析
学习目标:分析USB驱动源码结构. 一.Windows下USB驱动理论问题 1. 当usb设备接入PC时,右下角弹出"发现AAA",并弹出对话框,提示安装驱动程序.没有驱动程序,W ...
- keil5 mdk使用ST-Link II下载出现cannot halt the core解决办法
在正常的程序里面,我添加了MB85RS16(spi flash)这个外设驱动代码后,使用ST-Link II下载就出现cannot halt the core. 这个现象之前出现过1次,但是解决办法忘 ...
- ScriptManager和UpdatePanel用法 (ajax)
ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异 步局部更新区域,它必须依赖于ScriptManager存在, ...
- idea启动spring boot无法加载或找不到主类
问题产生原因:moudle名称修改,导致项目启动不了 在Terminal界面中执行以下三个命令,我在执行第一个命令的时候报了一个找不到dependency的错误,把那个报错的dependency删了就 ...
- RTL8195AM开发板使用
1. 本次使用RTL8195AM测试一下,原厂资源地址:https://os.mbed.com/platforms/Realtek-RTL8195AM/ 2. 由于板子支持mbed,所以把CON2连接 ...
- java集合浅谈（一）
一.类库结构图概览 容器对象仅能持有对象引用(对象的指针),而不是Copy对象信息,从网上搜得几张Java中集合类库的结构图,如下所示: 二.解说Collection 2.1 Collection ( ...
- ProxySQL初体验
Preface As we all know,it's a common sense that separate reading and writing operations can ...