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>