经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
详解css3中 text-fill-color属性 _css3_CSS
来源:jb51  时间:2019/7/8 12:40:19  对本文有异议

text-fill-color是什么意思呢?单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色,和color的效果很相似。如果同时设置text-fill-color和color两个属性,则text-fill-color会覆盖掉color的值。

由于text-fill-color是css3的新属性,一说到css3新属性,大家肯定就会问兼容效果如何呢??嘿嘿,只能毫不留情的说,兼容性很差呀,,只适用于webkit内核的浏览器有效果。。很可惜啊!!不过它虽然兼容性差,但是却可以制作很炫酷的文字效果,比如说流光文字,镂空文字等等。

制作流光文字,单单使用text-fill-color可是不行呀,还需要结合css3的animation来实现动画效果.下面直接上代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. *{margin: 0;padding: 0;}
  8. ._borderWrap{
  9. width: 180px;
  10. height: 150px;
  11. position: absolute;
  12. left: 23%;
  13. top: 25%;
  14. }
  15. ._border{
  16. line-height: 145px;
  17. text-align: center;
  18. font-size: 40px;
  19. font-weight: bolder;
  20. -webkit-text-fill-color: transparent;
  21. background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
  22. background-size: 200%,100%;
  23. -webkit-background-clip: text;
  24. -webkit-animation: word 5s linear infinite ;
  25. }
  26. @keyframes word {
  27. 0%{background-position: 0 0}
  28. 100%{background-position: -100% 0}
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="_borderWrap">
  34. <div class="_border">你的名字</div>
  35. </div>
  36. </body>
  37. </html>

 

效果图:

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

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

总结

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号