简单css实现文字渐变流光字代码

  • 内容
  • 相关

简单css实现文字渐变流光字代码

效果如图所示 不多说,纯css3就可以达到这样的效果。原理也很简单,就是给文字加一个渐变的背景套上,同理也可以用图片做背景一样可以达到这种效果。

代码如下:

background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
只需要在文字前面加一段style就可以。

很简单一段代码,然后里面第一行结尾有两个颜色属性,你可以照着多写几个颜色代码在里面从而达到彩色字体的效果。

颜色代码之间记得加英文的半角逗号,不然会出现错误。

方法很简单,上面的to right就是从左到右的颜色渐变规则,你也可以改成由上到下,有右到左等等,还可以45°颜色渐变。

话不多说,大家可以自己试试,代码很简单,好像在版本低的浏览器不会显示,自测吧。

热度:2532° 评分:8.7 发布时间: 2018年1月23日

本文标签:

版权声明:若无特殊注明,本文皆为《小洋vier》原创,转载请保留文章出处。

本文链接:简单css实现文字渐变流光字代码 - https://www.wuiso.com/post-937.html

发表评论

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