css 文字颜色的平滑转变文字颜色平滑转变属性主要属性 background-clip设置元素的背景（背景图片或颜色）

文字颜色平滑转变

属性主要属性

background-clip设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

background-clip: [border-box | padding-box | content-box | text]

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

background-position 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

// Keyword values
background-position: [top | bottom | left | right | center]

// Percentage value
background-position: 25% 75%;

例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Color Changing Title</title>
  </head>
  <body>
    <h1 class="colorChangingTitle"><span>Your Title</span></h1>
  </body>
</html>

span {
  /* 设置背景颜色 */
  background: linear-gradient(to right, red 50%, blue 50%);
  /* 将背景颜色的长度扩大两倍, red: 0~50% => 0~100% | blue:51~100% =>  101~200% */
  background-size: 200% 100%;
  /* 背景平移位置为100, 拉伸后就是蓝色的为底色 */
  background-position: 100%;
  /* 将字体颜色设置为透明 */
  color: transparent;
  /* 背景被裁剪成文字的前景色 */
  background-clip: text;
  /* 设置动画效果 改变 ackground-position 的值*/
  transition: background-position 0.5s ease;
}

/* 悬浮效果 */
span:hover {
  background-position: 0%;
}