css 滑动过度画面

要实现 CSS 滑动过度画面，可以使用 CSS3 的 transition 属性。具体实现步骤如下：

1. 首先，需要设置一个容器元素，比如 div，作为滑动过度画面的容器。
2. 然后，给容器元素设置宽度和高度，并设置 overflow 属性为 hidden，这样就可以隐藏容器元素中超出部分的内容。
3. 接着，给容器元素中的内容元素设置宽度和高度，并设置 float 属性为 left，这样就可以让内容元素水平排列。
4. 最后，给容器元素设置 transition 属性，指定过度效果的属性、时间和速度曲线即可。

下面是一个示例代码：

<div class="slider">
  <div class="slider-item">Slide 1</div>
  <div class="slider-item">Slide 2</div>
  <div class="slider-item">Slide 3</div>
</div>

.slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slider-item {
  width: 300px;
  height: 200px;
  float: left;
}

.slider {
  transition: transform 0.5s ease-in-out;
}

.slider.active {
  transform: translateX(-100%);
}

在上面的代码中，我们使用了 transform 属性来实现滑动过度效果。当容器元素的类名为 active 时，就会触发过度效果，将容器元素向左移动一个容器元素的宽度。