带有渐变蒙版的 CSS 垂直滚动选框答案

【问题标题】：CSS Vertical Scrolling Marquee with Gradient Mask带有渐变蒙版的 CSS 垂直滚动选框
【发布时间】：2020-03-08 06:44:47
【问题描述】：

我正在尝试在全出血背景上创建一个垂直滚动的选取框。滚动文本将包含在页面的中心，并且必须通过顶部和底部的渐变不透明度蒙版。

我可以在顶部或底部应用渐变蒙版，但不能同时应用。

有没有办法只用 CSS / HTML 做到这一点？

查看将不透明蒙版应用于容器底部的小提琴 - 目标是使该蒙版位于容器的顶部和底部。

  .bgimage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
  z-index:-2;
  }
  .container {
  width: 100%;
  height: 10vw;
  margin: 1em auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align:center;
  -webkit-mask-image: -webkit-gradient(linear, left 20%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  
  }

  .marquee {
  top: 6em;
  position: relative;
  box-sizing: border-box;
  animation: marquee 20s linear infinite;
  }


  /* Make it move! */
  @keyframes marquee {
  0%   { top:   18vw }
  100% { top: -65vw }
  }

  /* Make it look pretty */
  .microsoft .marquee {
	margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  color: white;
  font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  }

<div class="microsoft container">
    <p class="marquee">ONE<br /><br />TWO<br /><br />THREE<br /><br />FOUR<br /><br />FIVE<br /><br />SIX.</p>
</div>
<div class="bgimage">

</div>

【问题讨论】：

标签： css css-animations opacity linear-gradients css-mask

【解决方案1】：

只需像下面这样更新渐变：

.bgimage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
  z-index:-2;
  }
  .container {
  width: 100%;
  height: 10vw;
  margin: 1em auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align:center;
  -webkit-mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
          mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
  
  }

  .marquee {
  top: 6em;
  position: relative;
  box-sizing: border-box;
  animation: marquee 20s linear infinite;
  }


  /* Make it move! */
  @keyframes marquee {
  0%   { top:   18vw }
  100% { top: -65vw }
  }

  /* Make it look pretty */
  .microsoft .marquee {
	margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  color: white;
  font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  }

<div class="microsoft container">
  <p class="marquee">ONE<br><br>TWO<br><br>THREE<br><br>FOUR<br><br>FIVE<br><br>SIX.</p>
</div>
<div class="bgimage">

</div>

【讨论】：