利用纯CSS3绘制html网页流光文字

对于流光文字，大家并不陌生，毕竟我们都经历过非主流的时代。00后的请退避。你们卟懂绯紸流！因为你们毕竟是杀马特贵族！！比我们高贵。

还记得那些炫酷的签名档，或者那些炫酷的动态头像。当年可是卖到十几块钱一张的。不过大家对于流光文字的印象还是图片。那么在网页中怎么实现呢？

你说的在网页里面插入一张图片不就搞定了。这，，，确实可以。但是我们今天要讲的是利用纯CSS3绘制流光文字，可以直接显示，并不需要图片。

CSS代码如下：

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){#masked{background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));-webkit-text-fill-color:transparent;-webkit-background-clip:text;-webkit-background-size:200% 100%;-webkit-animation:masked-animation 4s infinite linear}}@-webkit-keyframes masked-animation{0%{background-position:0 0}100%{background-position:-100% 0}}

注意了，代码中的#masked 是流光文字的标签ID。你如果要在网页中使用流光文字的话。你可以在html代码标签中加入这个id就可以了。

比如说你可以这样写：<p id=“#masked”>这里是流光文字</p>

这也是我在某博客看到的，所以就偷偷学了下来，分享给大家！是不是比图片做的更炫酷！当然拿了，至于流光的颜色什么的，大家可以自己改。默认的是五个颜色，你也可以多写，或者少写几个颜色都可以。自己决定咯！

本文转载自：http://www.shaosiming.net/qianduan/52.html

Hello! How do you see it?

你还可以输入250 / 250 个字

取消回复



提交评论

评论信息框
可使用QQ号实时获取昵称+头像

QQ:

昵称:

邮箱:

网址:

吃奶的力气提交吐槽中...

发表评论

已有4条吐槽

青萌

2020-05-31 16:08 山东省临沂市电信

回复

优秀...

匿名

2019-03-21 15:25 广西玉林市电信

回复

哈哈啊大大

海云博客

2017-01-10 05:46 山西省太原市奇虎360科技联通CDN节点

回复

很不错哦 好羞射，文章真的好赞啊，顶博主！

小小的一世

2017-01-03 23:10 山东省淄博市电信

回复

很好很棒