css 实现div从下淡入淡出

可以通过使用CSS3的transition和opacity属性实现div从下方淡入淡出的效果。

首先，需要将该div的初始状态设置为opacity: 0;和transform: translateY(100%);，即让它不可见且向下移动一个div的高度。

然后，当需要将该div显示出来时，可以通过将opacity设置为1，同时将transform设置为translateY(0)，实现从下方淡入淡出的效果。

以下是一个简单的示例代码：

HTML:

<div class="fade-in-out">这是一个需要淡入淡出的div</div>

CSS:

.fade-in-out {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s, transform 0.5s;
}

.fade-in-out.active {
  opacity: 1;
  transform: translateY(0);
}

JS:

// 给该div添加.active类以显示它
document.querySelector('.fade-in-out').classList.add('active');

需要注意的是，需要通过JS来控制添加和移除.active类，以触发CSS的transition效果。