代码之家 › 专栏 › 技术社区 › paulcook

CSS带渐变遮罩的垂直滚动字幕

css-mask linear-gradients opacity css-animations css

paulcook · 技术社区 · 7 年前

我试图创建一个垂直滚动字幕在一个完全出血的背景。滚动文本将包含在页面的中心,并且必须在顶部和底部通过渐变不透明度遮罩。

我可以在顶部或底部应用渐变遮罩,但不能同时应用两者。

有没有办法只使用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>

1 回复 | 直到 5 年前

Temani Afif 5 年前

只需更新渐变,如下所示:

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前