Question

我正在寻找淡出HTML元素的方法。具体来说，我想让视频聊天中的消息列表从顶部的不透明逐渐消失。到目前为止，我所发现的只是整个元素的淡入淡出或一些廉价的CSS渐变颜色。我在寻找错误的东西，或者根本就没有好的解决方案。我已经研究了SVG遮罩，这正是我想要的，但似乎对我要达到的目的不起作用。

那么我该如何最好地解决这个问题？

Answer 1

这是您要找的东西吗？

HTML：

<div id="top"></div>
<div id="bottom"></div>

<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

CSS：

body {
  background-color: black;
}    
p {
  max-width: 200px;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  color: rgba(245,245,245,0.9);
  padding: 150px 0;
}    
#top {
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%);
  height: 300px;
  width: 101%;
  position: fixed;
  margin-top: -8px;
  margin-left: -10px;
}    
#bottom {
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
  position: fixed;
  bottom: 0;
  height: 0;
  width: 101%;
  margin-left: -10px;
}

Codepen：https://codepen.io/torjescu-sergiu/pen/YOzgZq

淡出HTML元素/ CSS遮罩

1 个答案: