css 实现mac页面切换时的动画效果

要实现 Mac 页面切换时的动画效果，可以使用 CSS3 的动画特性和 transform 变形属性。

以下是一个简单的示例：

HTML 代码：

<div class="page-container">
  <div class="page page1">页面1</div>
  <div class="page page2">页面2</div>
</div>

CSS 代码：

.page-container {
  position: relative;
  height: 400px;
  overflow: hidden;
}

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

.page1 {
  background-color: #ccc;
}

.page2 {
  background-color: #eee;
  transform: translateX(100%);
}

.page2.show {
  transform: translateX(0);
}

在这个示例中，我们使用了 `position: absolute` 将两个页面叠在一起，并设置了容器的 `overflow: hidden` 以隐藏超出容器的部分。

每个页面都设置了 `transition: transform 0.5s ease-in-out` 属性，表示当 `transform` 属性发生变化时，会有一个 0.5 秒的过渡效果。

页面 1 的 `transform` 属性没有任何值，表示不进行任何变形。

页面 2 的 `transform` 属性设置为 `translateX(100%)`，表示将页面向右平移 100% 的宽度，使其离开可视区域。

当要切换到页面 2 时，我们可以通过添加 `.show` 类来触发动画。例如：

document.querySelector('.page2').classList.add('show');

这会将页面 2 平移回可视区域，触发动画效果。

当然，这只是一个简单的示例，实际应用中可能需要更复杂的动画效果，可以通过调整 `transition` 和 `transform` 的属性值来实现。