是否可以为具有特定过渡宽度的文本创建 CSS 线性渐变？

Question

我有一个客户要求她的导航栏徽标的文本具有 CSS 渐变，从第一种颜色到第二种颜色的过渡非常短，就像她在网上找到的这张图片一样：

我知道在 CSS 中创建文本过渡的唯一方法是使用类似于以下代码的内容，它会创建一个非常渐进的过渡。

nav.navbar span {
  background: -webkit-linear-gradient(#f9f876, #82f7d6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

结果文本：

是否可以达到她在 CSS 中要求的文本效果？或者这是她必须向设计师提出的要求？

Answer 1

可以，通过指定起点和终点（例如 40% 和 60%）：

background: linear-gradient(#f9f876 40%, #82f7d6 60%);

body {
  background-color: magenta;
}

h1 {
  background: linear-gradient(#f9f876 40%, #82f7d6 60%);
  background: -webkit-linear-gradient(#f9f876 40%, #82f7d6 60%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

<h1>DOLCE'S DOLLHOUSE</h1>

是否可以为具有特定过渡宽度的文本创建 CSS 线性渐变？

Is it possible to create a CSS linear gradient for text with specific transition width?

css

webkit

colors

linear-gradients