h5甩屏切换

H5甩屏切换可以通过CSS3的transform属性和transition属性实现。以下是一个简单的例子：

HTML代码：

<div class="screens">
  <div class="screen" style="background-color: red;"></div>
  <div class="screen" style="background-color: green;"></div>
  <div class="screen" style="background-color: blue;"></div>
</div>

CSS代码：

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

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
}

.screen.active {
  transform: translateX(0);
}

这个例子中，我们创建了一个宽度为300px，高度为200px的屏幕容器.screens，并在其中创建了三个宽高与.screens相同的div元素，作为三个屏幕，分别设置了不同的背景颜色。设置.screens的overflow为hidden，以隐藏超出容器范围的元素。

然后我们给每个.screen元素设置了position:absolute，并通过transform: translateX(100%);将其移动到容器右侧。再给.screen元素设置了transition属性，设置了动画时间和动画效果。

最后我们在.active类中设置transform: translateX(0);，并将该类应用到其中一个.screen元素上，即可实现屏幕的切换效果。可以通过给屏幕容器.screens添加一个点击事件，通过js给需要显示的屏幕添加.active类来实现屏幕切换。