css渐变文字

要实现 CSS 渐变文字，可以使用 CSS3 的 background-clip 和 text-fill-color 属性。具体步骤如下：

1. 首先创建一个元素，比如一个 div 元素，设置它的背景色为渐变色。例如：

   div {
     background: linear-gradient(to right, red, yellow);
   }

2. 接着，将这个元素的背景色设置为文字的填充色，同时使用 background-clip 属性将背景色限制在文字区域内。例如：

   div {
     background: linear-gradient(to right, red, yellow);
     -webkit-background-clip: text;
     -moz-background-clip: text;
     background-clip: text;
     color: transparent;
   }

这里需要将文字颜色设置为透明，否则文字就会覆盖掉背景色，看不到渐变效果。

3. 最后，如果需要动态改变渐变色的方向或颜色，可以使用 CSS3 的动画属性实现。例如：

   div {
     background: linear-gradient(to right, red, yellow);
     -webkit-background-clip: text;
     -moz-background-clip: text;
     background-clip: text;
     color: transparent;
     animation: gradient 5s infinite;
   }

   @keyframes gradient {
     0% {
       background: linear-gradient(to right, red, yellow);
     }
     50% {
       background: linear-gradient(to right, blue, green);
     }
     100% {
       background: linear-gradient(to right, red, yellow);
     }
   }

这里定义了一个名为 gradient 的动画，让渐变色在 5 秒内从红色到黄色，再到蓝色到绿色，最后回到红色到黄色的循环过程中进行渐变。