html实现两页切换

可以使用CSS3中的动画效果来实现两页切换的效果。以下是一个简单的示例：

HTML代码：

<div class="page-container">
  <div class="page page1">第一页</div>
  <div class="page page2">第二页</div>
</div>
<button onclick="togglePage()">切换页面</button>

CSS代码：

.page-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.page1 {
  background-color: #f2f2f2;
  transform: translateX(0);
}
.page2 {
  background-color: #ccc;
  transform: translateX(100%);
}
.show-page1 .page1 {
  transform: translateX(0);
}
.show-page1 .page2 {
  transform: translateX(-100%);
}
.show-page2 .page1 {
  transform: translateX(100%);
}
.show-page2 .page2 {
  transform: translateX(0);
}

JavaScript代码：

function togglePage() {
  var container = document.querySelector('.page-container');
  if (container.classList.contains('show-page1')) {
    container.classList.remove('show-page1');
    container.classList.add('show-page2');
  } else {
    container.classList.remove('show-page2');
    container.classList.add('show-page1');
  }
}

在这个示例中，我们创建了一个包含两个页面的容器，使用CSS中的绝对定位来使它们重叠。使用CSS3中的transition属性来定义页面切换时的动画效果。JavaScript代码中的togglePage函数用于切换两个页面的显示状态，通过添加和移除CSS类来实现。

当我们点击按钮时，JavaScript代码会检查当前显示的是哪个页面，然后添加或移除相应的CSS类，从而触发页面切换的动画效果。