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

  • 首页 > 技术学习
  • 作者:小小的一世
  • 时间: 2017年1月3日 21:34
  • 字数:991 个
  • 字号:
  • 评论:4 条
  • 浏览:9299 次
  • 百度:百度已收录
  • 分类: 技术学习
  • 时间:2017-1-3 21:34 热度:9299° 评论:4 条 

    对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代。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

    正文到此结束
    您阅读这篇文章共花了: 
    本文链接:http://www.suozy.cn/post-19.html
    版权声明:若无特殊注明,本文皆为《小小的一世》原创,转载请保留文章出处。

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗

    已有4条吐槽

    青萌

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

    匿名

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

    海云博客

    2017-01-10 05:46 山西省太原市奇虎360科技联通CDN节点
    很不错哦face 好羞射,文章真的好赞啊,顶博主!

    小小的一世

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

    返回顶部    返回首页    手气不错    手机版本   后花园   
    版权所有:小小的一世    站点维护: 小小的一世   若要幸福,不写忧伤;红尘满界,不道惆怅。 【风雨一生兼程,灵魂轻盈随行】   鲁ICP备15009546号-1