html流光效果图,利用纯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就可以了。

比如说你可以这样写：

这里是流光文字

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

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

html流光效果图,利用纯CSS3绘制html网页流光文字相关推荐

css3控制html中图片,精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢今天我们要分享一个利用纯C ...
用纯CSS3绘制萌系漫画人物动态头像
大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...
气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用纯css绘制一个简单的气泡提示框,对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事,但是程序员最不喜欢做的事情是重复造轮子,加上之前小编分享的几个气泡要么过于复杂,通用性不强,要么需要鼠 ...
纯CSS3绘制的猫咪老师——献给喜欢CSS3及《夏目友人帐》的你
2019独角兽企业重金招聘Python工程师标准>>> 最近正发愁着毕业设计做些什么,而后闲逛时看到了诸如twitter小鸟.哆啦A梦.灰太狼等纯CSS3实现的图像.于是本着初学的心 ...
html css 画五角星,纯 CSS3 绘制图形（心形、五角星、六边形等）
这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等.我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象 ...
用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画
本人是学生,正在想深入学习html5和css3,所以最近在研究用css3绘制矢量图,于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画, 动画的宽高比例为:" ...
html5 css3画八卦图,用纯CSS3绘制乾坤八卦图
乾坤八卦图衍生自中国古代的<河图>与<洛书>,伏羲根据燧人氏造设的这两幅星图所作.其形状经过抽象以后,成为对称感相当强的几何图形,无论是黑白两色还是形状,都非常地平衡和稳重. ...
html5绘制好看的时钟,利用纯html5绘制出来的一款非常漂亮的时钟
今天给大家分享一款非常漂亮的纯html5实现的时钟.整个界面都由html5绘制而成.一起看下效果图: 实现的代码. htm代码: XML/HTML Code复制内容到剪贴板 gradientTrans ...
纯CSS3绘制神奇宝贝伊布动画特效
在线演示本地下载

html流光效果图,利用纯CSS3绘制html网页流光文字

html流光效果图,利用纯CSS3绘制html网页流光文字相关推荐

最新文章

热门文章