文字颜色渐变效果

来源：互联网发布：上海大学乐乎论坛二手编辑：程序博客网时间：2024/05/16 09:30

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

这里写图片描述

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

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>

阅读全文

0 0