css - 是否可以为具有特定过渡宽度的文本创建 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 中请求文本的效果？或者这是她必须向设计师提出的要求？

标签： csscolorswebkitlinear-gradients

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>