如何用css把你的标题变成流光渐变色
Webmaster
·
对于流光文字，大家并不陌生，毕竟我们都经历过非主流的时代。
还记得当年用ps设计的那些炫酷的签名档，或者那些炫酷的动态头像。不过大家对于流光文字的印象还是GIF图片。那么在网页中怎么实现呢?我们今天要讲的是利用纯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>
这也是我在某博客看到的，所以就偷偷学了下来，分享给大家！是不是比图片做的更炫酷！当然拿了，至于流光的颜色什么的，大家可以自己改。默认的是五个颜色，你也可以多写，或者少写几个颜色都可以。自己决定咯！
本文章未特殊注明的版权信息归本站所有，著名来源归原作者所有！
猜你喜欢
发表评论
电子邮件地址不会被公开。 必填项已用*标注
