详解css3中 text-fill-color属性


Posted in HTML / CSS onJuly 08, 2019

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>

 

效果图:

详解css3中 text-fill-color属性

“你的名字”就是制作的流光文字,只不过截图是静态的,想看动态效果需要自己运行代码哟!

注意,制作流光文字有几个要点:text-fill-color一般设置为transparent(透明色),然后利用background-image和渐变颜色来设置文字的背景色,利用background-clip来实现文字的截取,再利用background-size设置扩大背景,已使运用animation的时候能达到动画的效果等。

总结

以上所述是小编给大家介绍的css3中 text-fill-color属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
解决margin 外边距合并问题
Jul 03 #HTML / CSS
css3实现蒙版弹幕功能
Jun 18 #HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 #HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 #HTML / CSS
CSS3 分类菜单效果
May 27 #HTML / CSS
css3实现六边形边框的实例代码
May 24 #HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 #HTML / CSS
You might like
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
js中作用域的实例解析
2017/03/16 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python使用贪婪算法解决问题
2019/10/22 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
Delphi工程师笔试题
2013/09/21 面试题
信息科学与技术专业求职信范文
2014/02/20 职场文书
争做文明公民倡议书
2014/08/29 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
《1942》观后感
2015/06/08 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
Python实现科学占卜 让视频自动打码
2022/04/09 Python