css - 带渐变的滚动导航栏

Question

我正在尝试为页面的移动版本创建一个带有渐变渐变的导航栏。要演示我所描述的内容，请查看 Google 搜索结果页面的移动版本。当您滚动水平导航栏(带有指向新闻、购物、图像等子页面的链接)时，最左边和最右边的文本会淡出。

如您所见，每个导航栏都显示渐变渐变，在相对于视口(viewport)的相同位置和相对于导航链接的不同位置。第一个是“alles”和“shopping”的渐变，第二个是“alles”和 map 中的“m”的渐变，第三个是“news”的渐变，没有文字足够远的右边有一个渐变。

这里的挑战是文本需要滚动，渐变需要保持在视口(viewport)中的同一位置。渐变相对于文本的位置需要随着文本的滚动而改变。

我找到的所有使用 CSS 的渐变文本解决方案都涉及使用 -webkit-linear-gradient 背景和 -webkit-background-clip: text;和 -webkit-text-fill-color: transparent;。这基本上创建了一个轮廓为文本的渐变背景，然后使文本不可见，以便可以看到背景。背景不滚动。

是否有使用 CSS 解决此问题的方法？

谢谢!

Answer 1

我会使用 pointer-event: none; 在您的栏顶部创建一个溢出的 div。这个 div 将包含从白色到透明再到白色的渐变背景。可以使用 css 或图像来完成。

.bar {
  position: relative;
  width: 100%;
  background-color: white;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
}

<div class="bar">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  <div class="gradient">
  </div>
</div>