渐变色文本

36 阅读1分钟

效果图

image.png

    //线性渐变背景
    background: linear-gradient(
      92deg,
      #0072ff 0%,
      #00eaff 48.8525390625%,
      #01aaff 100%
    );
    //背景裁剪到文本的前景部分
    -webkit-background-clip: text;
    //文本的颜色设置为透明
    -webkit-text-fill-color: transparent;

实现文本渐变色的效果。具体来说,它使用了CSS的linear-gradient来创建一个线性渐变背景,然后通过-webkit-background-clip和-webkit-text-fill-color将背景应用到文本上,从而实现文本的渐变色效果