全屏页面切换特效

以下是一个简单的全屏页面切换特效的示例代码，可以用来实现网站的页面切换效果。代码中使用了 jQuery 和 CSS3 动画效果。

HTML 代码：

<div class="page-container">
  <div class="page" id="page1">
    <h1>Page 1</h1>
    <p>This is the first page.</p>
  </div>
  <div class="page" id="page2">
    <h1>Page 2</h1>
    <p>This is the second page.</p>
  </div>
  <div class="page" id="page3">
    <h1>Page 3</h1>
    <p>This is the third page.</p>
  </div>
</div>

CSS 代码：

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.page-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.page.active {
  display: block;
}

.page.in {
  animation: fadeIn 1s ease-in-out;
}

.page.out {
  animation: fadeOut 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

JavaScript 代码：

$(document).ready(function() {
  showPage($("#page1"));

  $(".nav-link").click(function(event) {
    event.preventDefault();
    var page = $($(this).attr("href"));
    showPage(page);
  });
});

function showPage(page) {
  $(".page.active").addClass("out");
  setTimeout(function() {
    $(".page.active").removeClass("active out");
    page.addClass("in active");
  }, 1000);
}

在这个示例中，页面通过一个包含多个子页面的容器来实现。每个子页面都是一个具有唯一标识符的 DIV 元素，并且通过 CSS 的绝对定位来覆盖整个容器。每个页面的默认状态是隐藏的，只有在它们被激活时才会显示。

当用户点击导航链接时，JavaScript 代码会获取目标页面的 ID 并使用 showPage() 函数来切换页面。该函数首先将当前活动页面标记为“out”，然后使用 CSS 动画效果淡出该页面。在动画完成后，该页面的“active”和“out”类都被删除，而目标页面则被标记为“in”和“active”，并使用 CSS 动画效果淡入。

此外，该代码还使用了 jQuery 和 CSS3 动画效果来实现页面切换效果。在这个示例中，我们使用了“fadeIn”和“fadeOut”动画，它们分别在页面淡入和淡出时播放。

以上就是一个简单的全屏页面切换特效的示例代码，你可以根据自己的需要进行修改和定制。