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 ...
随机推荐
- LeetCode 简单 - 最大子序和(53)
采用动态规划方法O(n) 设sum[i]为以第i个元素结尾且和最大的连续子数组.假设对于元素i,所有以它前面的元素结尾的子数组的长度都已经求得,那么以第i个元素结尾且和最大的连续子数组实际上,要么是以 ...
- SAP存储税率税码的相关表
T007A 稅關鍵字 T007B 會計中的稅務處理 T007C Groupings for tax codes T007D 賦稅群組的內文 T007F 銷項 / 進項群組的稅 T007G 不再使用該表 ...
- SpringBoot配置全局自定义异常
不同于传统集中时Springmvc 全局异常,具体查看前面的章节https://www.cnblogs.com/zwdx/p/8963311.html 对于springboot框架来讲,这里我就介绍一 ...
- notepad++实现python运行
一.先确保windows电脑上先安装python解释器 方法参考:https://www.cnblogs.com/hepeilinnow/p/9727922.html 二.打开notepad++,写一 ...
- 配置Github秘钥
Git安装完成后,需要手动配置ssh密钥 配置github的ssh密钥: (1)打开Git Bash查看电脑上是否已经存在SSH密钥: 输入 cd ~/.ssh 若如上图显示无法找到该文件则要创建新的 ...
- MySQL innodb表使用表空间物理文件复制或迁移表
MySQL InnoDB引擎的表通过拷贝物理文件来进行单表或指定表的复制,可以想到多种方式,今天测试其中2种: 将innodb引擎的表修改为Myisam引擎,然后拷贝物理文件 直接拷贝innodb的表 ...
- C语言实例解析精粹学习笔记——32
实例32: 编制一个包含姓名.地址.邮编和电话的通讯录输入和输出函数. 思路解析: 1.用结构体来完成姓名.地址.邮编和电话的组合. 2.结构体指针的使用. 3.malloc的使用 4.scanf函数 ...
- P1396 营救(最小瓶颈路)
题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪盈眶,开起了门…… 妈妈下班回家,街坊邻居说小明被一群陌生人强行押上了警车!妈妈丰富的经验告诉她小 ...
- python2.7入门---字典（Dictionary）
这次咱们记录的是python中的字典这个鬼,首先我们得了解,字典是另一种可变容器模型,且可存储任意类型对象.字典的每个键值 key=>value 对用冒号 : 分割,每个键值对之间用逗号 ...
- python第一个程序-->hello world
最近在网上看到一个小笑话,一个程序员的自我嘲讽:“我精通所以计算机语言的hello world!” 好了,废话不多说了,开始撸代码: 我本人用的是python3.6版本,各位可以通过官网下载自己喜欢的 ...