css3实现颜色渐变文字

首先来看例子

// css 样式部分
.welcome {
    color                  : #f35626;
    background-image       : linear-gradient(92deg, #f35626 0%, #feab3a 100%);
    -webkit-background-clip: text;
    background-clip        : text;
    -webkit-text-fill-color: transparent;
    animation              : hue 10s infinite linear;
    font                   : 100%/1.5 "Roboto", Verdana, sans-serif;
    -webkit-font-smoothing : antialiased;
}
    
@keyframes hue {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(-360deg);
  }
}
    
//dom 结构 
<span class="welcome animated teda">WELCOME</span>

See the Pen oKQepz by nigel201611 (@nigel201611) on CodePen.

效果:颜色随机不断变化

深挖知识点

• background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%);
• linear-gradient(92deg, #f35626 0%, #feab3a 100%);
• -webkit-background-clip: text;background-clip: text;
• -webkit-text-fill-color: transparent;
• animation: hue 10s infinite linear;

background-image

定义和用法

background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。 background-image

linear-gradient(92deg, #f35626 0%, #feab3a 100%)

定义和用法

linear-gradient() 函数用于创建一个线性渐变的 "图像"。 为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

CSS 语法

background: linear-gradient(direction, color-stop1, color-stop2, ...); linear-gradient

background-clip

定义和用法

background-clip 属性规定背景的绘制区域。 bbackground-clip background-clip: border-box | padding-box | content-box | text;

• border-box 背景延伸至边框外沿（但是在边框下层）。
• padding-box 背景延伸至内边距（padding）外沿。不会绘制到边框处。
• content-box 背景被裁剪至内容区（content box）外沿。
• text 背景被裁剪成文字的前景色。

-webkit-text-fill-color

定义和用法

-webkit-text-fill-color -webkit-text-fill-color The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used.

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

filter

定义和用法

filter filter . The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.Included in the CSS standard are several functions that achieve predefined effects. You can also reference an SVG filter with a URL to an SVG filter element.

With a function, use the following:

filter: filter-function | none

For a reference to an SVG element, use the following:

filter: url(file.svg#filter-element-id)