1

我试图在滚动上创建褪色文本效果，其中元素顶部和底部的文本是透明的，但中心的文本仍然完全不透明。视频背景上还有无限滚动的文本。因为效果不好解释，这里是目前只在 Chrome 上运行的效果演示：

工作演示：http ://dboxcg.dev.dbox.com/portfolio

它在 chrome (v81.0.4) 上运行，但在 firefox、safari 和所有移动浏览器上运行。

以下是上述演示的代码：

.container {
  background:linear-gradient(rgba(255,255,255,0) 10%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
}

.video-background {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div class="container">
  <ul>
     <li><a href="/portfolio/108_leonard">108 LEONARD</a></li>
     <li><a href="/portfolio/20_grosvenor_square">20 GROSVENOR SQUARE</a></li>
     <li><a href="/portfolio/25_park_row">25 PARK ROW</a></li>
     <li><a href="/portfolio/432_park_avenue">432 PARK AVENUE</a></li>
     <li><a href="/portfolio/57_ocean">57 OCEAN</a></li>
     <li><a href="/portfolio/aerials">AERIALS</a></li>
     <li><a href="/portfolio/animations_films">ANIMATIONS / FILMS</a></li>
     <li><a href="/portfolio/bathrooms">BATHROOMS</a></li>
     <li><a href="/portfolio/bedrooms">BEDROOMS</a></li>
     <li><a href="/portfolio/human_models_in_cg">HUMAN MODELS IN CG</a></li>
     <li><a href="/portfolio/institutions">INSTITUTIONS</a></li>
  </ul>
  <div class="video-background">
    <video src="https://player.vimeo.com/external/111111.hd.mp4" style="width: 100%; height: 100%;" preload="auto" autoplay="" loop="" playsinline="" webkit-playsinline="" x5-playsinline=""></video>
  </div>
</div>

我能够通过以下问题的答案在 Chrome 上完成上述工作： Fade out text on image

mask-image看起来像正确的 CSS 属性，但在我的示例中遇到了无限滚动文本的问题。

是否有可能为这种效果获得一些跨浏览器兼容性？

4

1 回答 1

1

这是如何使用掩码完成的。诀窍是有两层。文本下方一个，应用蒙版的文本上方相同。

这是我使用图像的示例，但您可以像在示例中那样使用视频来完成

.box {
  padding:0 100px;
  font-size:50px;
  font-weight:bold;
  color:#fff;
}

html {
  min-height:100%;
  background:url(https://picsum.photos/id/1074/1000/1000) center/cover fixed;
}
html:before {
  content:"";
  position:fixed;
  z-index:99;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://picsum.photos/id/1074/1000/1000) center/cover fixed;
  -webkit-mask: linear-gradient(#fff,transparent 30% 70%,#fff);
          mask: linear-gradient(#fff,transparent 30% 70%,#fff);
}
<div class="box">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac venenatis enim. Suspendisse vestibulum mattis finibus. Ut velit metus, pulvinar id elementum nec, tempus et mi. Phasellus consequat mauris nisi, a iaculis nulla molestie eget. Praesent velit arcu, consectetur ac arcu ac, volutpat laoreet erat. Nulla eu est dui. Pellentesque ultricies finibus velit sit amet feugiat. Integer posuere mauris eu faucibus laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam in ullamcorper dui. Nunc fermentum scelerisque metus cursus tincidunt. Phasellus tortor justo, gravida eget mi sed, condimentum placerat neque. Vivamus fermentum quam a tincidunt placerat. Pellentesque quis dictum odio.
</div>

于 2020-04-29T18:57:44.147 回答