淡化 CSS（不是过渡）

【问题标题】：Fade CSS (not transition)淡化 CSS（不是过渡）
【发布时间】：2020-09-29 09:59:19
【问题描述】：

有什么方法可以在this 站点中重新创建淡入淡出效果。我试过搜索，但我只得到了时尚动画。

我只想要 fade 属性 css。

TIA

【问题讨论】：

请清除您的问题。
使用浏览器的检查工具并检查他们的代码，看看他们是如何做到的。提示：这是.diagram-infra:after 元素上从透明到白色的线性渐变。
@DrewReese 谢谢。我错过了那部分。我认为这与过渡有关。感谢您的帮助。

标签： html css reactjs css-transitions

【解决方案1】：

您链接的网站使用该元素的 CSS 中的 background 属性设置了渐变为白色 (#fff)：

background: linear-gradient(hsla(0, 0%, 100%, 0), #fff 50%);

不过，您不必这样做。例如，您可以尝试这样的操作：

<div class="fader">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" style=" -webkit-mask-image: -webkit-gradient(linear, left 0%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))">
</div>

【讨论】：