css 两个盒子从下往上过渡

在CSS中，你可以通过`transition`和`transform`属性配合来创建两个盒子从下往上逐渐出现的动画效果。以下是基本步骤：

1. **设置初始状态**：首先，将这两个盒子定位到页面底部，通常使用`position: absolute; bottom: 0;`。然后，给它们初始高度设为`0px`，隐藏它们。

.box {
  position: absolute;
  bottom: 0;
  height: 0;
  transition: height 1s ease; /* 这里1s是你想要的过渡时间 */
}

2. **添加过渡效果**：当需要显示这两个盒子时，改变它们的高度，例如设置为`100%`或者其他合适的值。同时，可以添加`transform: translateY(0);`来让它们同时向上移动。

.box.show {
  height: 100%; /* 或者你想要的实际高度 */
  transform: translateY(0);
}

3. **触发动画**：使用JavaScript或者HTML的`:hover`, `:focus`等伪类来切换`.show`类，激活动画效果。

<button onclick="document.querySelector('.box').classList.toggle('show')">点击显示</button>

<div class="box"></div>

这样，当你点击按钮时，第一个盒子就会从底部缓慢地滑动到屏幕顶部。