如何用css把你的标题变成流光渐变色

对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代。

还记得当年用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>


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

非著名均为来自网络,不代表一点新作立场,若为著名原创,转载请注明出处:https://ydxinzuo.cn/archives/1371

作者: xinyuan7630

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 303817524@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部