详解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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
Css预编语言及区别详解
Apr 25 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
PHP Switch 语句之学习笔记
2013/09/21 PHP
php随机显示图片的简单示例
2014/02/15 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
PHP反射API示例分享
2016/10/08 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
Dojo 学习要点
2010/09/03 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
RequireJs的使用详解
2017/02/19 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
python打包成so文件过程解析
2019/09/28 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
python的链表基础知识点
2020/09/13 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
财务总经理岗位职责
2014/02/16 职场文书
2014全国两会心得体会
2014/03/17 职场文书
2015年班组工作总结
2015/04/20 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
详解Redis主从复制实践
2021/05/19 Redis
Python 图片添加美颜效果
2022/04/28 Python