首页 > Web开发 > 详细

从小姐姐博客那里看到的流光文字(CSS3 animate)

时间:2017-01-08 16:39:39      阅读:253      评论:0      收藏:0      [点我收藏+]

对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代。你们卟懂绯紸流!色彩缤纷的QQ空间......

还记得那些炫酷的签名档,或者那些炫酷的动态头像。不过大家对于流光文字的印象还是图片。那么在网页中怎么实现呢?

你说的在网页里面插入一张图片不就搞定了。这,,,确实可以。今天要讲的是利用纯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}}

插入标签id即可:<p id="masked">cosyer的博客</p>

从小姐姐博客那里看到的流光文字(CSS3 animate)

原文:http://www.cnblogs.com/cosyer/p/6262120.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!