[分享]css3卷脚翻页原理

CSS3的卷脚翻页效果是一种非常炫酷的网页切换效果。它让用户能够通过滑动鼠标滚轮或点击鼠标，让下一页顺利地滑入屏幕，让用户的视野非常舒适。CSS3卷脚翻页效果的背后原理其实也很简单，下面我就来给大家介...

CSS3的卷脚翻页效果是一种非常炫酷的网页切换效果。它让用户能够通过滑动鼠标滚轮或点击鼠标，让下一页顺利地滑入屏幕，让用户的视野非常舒适。CSS3卷脚翻页效果的背后原理其实也很简单，下面我就来给大家介绍一下。

.page{
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
}

.page_wrap{
    width: 100%;
    transition: all 0.6s ease-in-out;
}

.page_wrap:last-child{
    transform: translateX(-100%);
} 

首先，我们需要选定切换页面的元素，比如class为“page”的div块。在样式里给这个块设置了position:fixed;和overflow:hidden;属性，来固定页面位置，并隐藏页面的滚动条，这样才能让卷脚翻页有更流畅的效果。

接下来，我们为每一页都新建一个div块，在样式里给这个块设置为“page_wrap”。在这个div块内，我们需要设置页面的width和height属性，来规定页面的大小和位置。这时候我们可以让页面通过transform来滑动，而不是通过left和top来滑动。因为当我们通过left和top来控制页面的时候，其实需要重新计算每一个页面的位置，而通过transform，我们可以保证每一个页面在滑动的时候位置不变，这样就可以省去重新计算位置的麻烦。

接下来，我们需要让每一个page_wrap都显示在屏幕外面，除了第一个。可以使用transition来规定transform的滑动规则，这里我们设置为all 0.6s ease-in-out。其中，all表示所有属性的缓动时间都是0.6秒，ease-in-out表示变化会在起始和终止时变得慢一点，会让动画效果更加平滑。

最后，我们需要让最后一个page_wrap滑动到屏幕里面，这时候我们需要用到:last-child伪类，在样式里给:last-child的page_wrap设置transform:translateX(-100%);属性，让页面滑到屏幕外面。这样就可以实现卷脚翻页效果了。

以上就是CSS3卷脚翻页原理的简单介绍，希望大家能够掌握！