CSS3下的渐变文字效果实现

核心提示：CSS3下的渐变文字效果实现

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

如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面的效果：

相应的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核心浏览器下的渐变”了。

1 2 下一页 >全文阅读
提示：试试"← →"键，翻页更方便哦！

[1] [2]  下一页