css点击页面切换特效

在网页设计中，一个好看而且富有创意的页面切换特效可以增加用户的体验感和页面的美观程度。而CSS可以轻松实现这样的页面切换特效。下面我们来学习一下如何使用CSS实现点击页面切换特效。

/*首先，我们需要创建两个div，一个代表前一页，一个代表后一页*/
<div class="page previous-page"></div>
<div class="page next-page"></div>
/*然后，我们需要使用CSS设置它们的样式*/
.page{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 1s ease-in-out;
}
.previous-page{
  z-index: 1;
  background-color: #f1f1f1;
}
.next-page{
  z-index: 2;
  background-color: #d4d4d4;
}
/*接下来，我们需要使用JavaScript来实现点击切换页面的效果*/
<script>
var nextButton = document.querySelector(".next-button");
var previousButton = document.querySelector(".previous-button");
var previousPage = document.querySelector(".previous-page");
var nextPage = document.querySelector(".next-page");
nextButton.addEventListener("click", function(){
  previousPage.style.opacity = "1";
  nextPage.style.opacity = "1";
  setTimeout(function(){
  
  previousPage.classList.add("invisible");
  
  nextPage.classList.remove("invisible");
}
, 1000);
}
);
previousButton.addEventListener("click", function(){
  nextPage.style.opacity = "1";
  previousPage.style.opacity = "1";
  setTimeout(function(){
  
  nextPage.classList.add("invisible");
  
  previousPage.classList.remove("invisible");
}
, 1000);
}
);
</script>
/*最后，我们需要在CSS中设置一个.invisible类，来隐藏我们不需要显示的页面*/
.invisible{
  opacity: 0;
  pointer-events: none;
}
 

通过上面的代码，我们可以轻松实现一个带有平滑过渡效果的点击页面切换特效。用户点击下一页或上一页按钮时，当前页面和下一页/上一页都会逐渐变亮，并且在一秒钟后，当前页面会慢慢消失，下一页/上一页会显示出来。