CSS Вертикальная прокручивающаяся область с градиентной маской

Я пытаюсь создать рамку с вертикальной прокруткой на полном фоне за обрез. Прокручиваемый текст будет находиться в центре страницы и должен проходить за маской непрозрачности градиента вверху и внизу.

Я могу применить маску градиента вверху или внизу, но не одновременно.

Есть ли способ сделать это только с помощью 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 opacity css-animations linear-gradients css-mask
person paulcook    schedule 19.02.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Просто обновите градиент, как показано ниже:

.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>

person Temani Afif    schedule 19.02.2018