css3 文字横向渐变,CSS3实现渐变文字效果

本文主要和大家分享CSS3实现渐变文字效果,我们主要和大家分享两种方法，希望能帮助到大家。

一、方法一：借助mask-image属性

方法一下的文字渐变效果

相应的HTML代码如下：

天赐美妞

与HTML相对应的CSS代码如下：

.text-gradient {

display: inline-block;

font-family: '微软雅黑';

font-size: 10em;

position: relative;

}

.text-gradient[data-text]::after {

content: attr(data-text);

color: green;

position: absolute;

left: 0;

z-index: 2;

-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));

}

从CSS代码可以看出，效果的实现除了“content内容生成技术”以外，主要是使用了mask-image属性，内容则是“webkit核心浏览器下的渐变”了。

二、方法二：background-clip + text-fill-color下的实现

方法二下的文字渐变效果

此处实现相对上面要简单些，HTML代码如下：

天赐美妞

<