css3如何实现文字渐变效果?

文章2019-04-27890 人已阅来源:网络

css3实现文字渐变的效果,很早的一个效果,作为备注,方便有人查找。

css3如何实现文字渐变效果?

这里说两种常用的方法

  • background-cli、 text-fill-color
  • mask-image

还有就是用svg和canvas的方法也可以实现,但是在页面应当不常用到,有兴趣的可以自行研究一下。

下面可以运行代码看一下效果:

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3实现彩色文字的方法tonjay.com</title>
</head>
<style>
    body {padding:20px;font-family:-apple-system,SF UI Text,PingFang SC,Arial,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;}
    div {font-size:48px;font-weight:800;}
    .colorText {background-image:-webkit-linear-gradient(red,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;}
    .colorText2 {color:blue;position:relative;}
    .colorText2[data-content]::after {content:attr(data-content);display:block;position:absolute;color:aqua;left:0;top:0;z-index:2;-webkit-mask-image:-webkit-gradient(linear,0 0,0 bottom,from(green),to(rgba(0,0,0,0)));}
</style>
<body>
    <h2>1、colorText</h2>
    <div class="colorText">我是彩色的文字</div>
    <h2>2、colorText</h2>
    <div class="colorText2" data-content='我是彩色的文字'>我是彩色的文字</div>
</body>
</html>