您的位置：首页 > 其它

文字颜色渐变效果

2017-11-05 15:27 489 查看

在开发的时候经常会有实现文字渐变效果的这种需求，接下来就和大家分享一个实现的过程。有两种实现的方式：

第一种：

这里想说明两个比较重要的知识点：

1.伪元素的conten属性可以使用attr（）的方式，让元素里面的文字变成可变的。这个在我平常用vue写业务代码的时候用的还是比较多的，个人感觉也是非常的实用。

2.css中遮罩属性mask。在这我只是使用了线性渐变的这种方式来达到我想要的效果。其实mask属性的作用并没有那么简单。它还可以通过添加背景图片来达到一些比较酷炫的效果

这是mdn上面的使用教程:

不仅能实现颜色渐变的效果，还能将图片和颜色配合使用。

/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image< values */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: unset;

字体颜色渐变代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
h1{
position: relative;
color: black;
}
h1:after{
content: attr(data-txt);
position: absolute;
left: 0;
color: red;
-webkit-mask: -webkit-gradient(
linear,
left top,
right top,
from(rgba(0,0,0,0.1)),
to(rgba(0,0,0,0.8))
);
}
</style>
</head>
<body>
<h1 data-txt="web前端教程">
web前端教程
</h1>
</body>
</html>

第二种：

这一种实现的方式其实利用的是背景颜色渐变的原理，想到字体颜色渐变其实我脑子里第一个想到的就是利用背景颜色。但是毕竟没有做过这方面的需求，没想到试了一下，真的可行，以下是3个重点：

1. background: linear-gradient（to right,pink,black），背景颜色渐变的效果，如果不写方向的话，默认是从上到下的渐变效果。

这里我踩了一个坑，我原来写的是（right,pink,black）的，在谷歌上完全不起作用，但是加上to后就可以了。所以还是得按照标准的写法。。。

2.原本以为background-clip: border-box|padding-box|content-box;只有这三种属性，没想到居然还有一种，那就是-webkit-background-clip: text;通过这种形式，可以将背景颜色锁定在了文字内容的区域，从而达到了颜色渐变的效果

3.text-fill-color：指定文字的填充颜色。默认的颜色是transparent；如果同时设置color的颜色和text-fill-color的颜色的话，text-fill-color的颜色会覆盖color的颜色。

案例中我已经将字体的颜色设置为红色，但是我又将text-fill-color的颜色设置为透明，所以字体的颜色就不起作用了。

需要注意的是：可以直接将color设置为transparent，也就是透明。然后text-fill-color这个属性就可以省略了。渐变的效果还是有效的。

text-fill-color属性的拓展

text-fill-color属性不仅能让我们实现颜色渐变的效果，还能实现文字镂空的效果。属性就是这个：-webkit-text-stroke: 1px red;

字体颜色渐变代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
h2{
color: red;
background: linear-gradient(to right,pink,black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2>
颜色渐变效果
</h2>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航