css3 纵向全屏翻页

CSS3 纵向全屏翻页是一种独特的页面布局方式，它可以让人体验到全新的创意和惊喜。它通过一系列的 CSS 属性和技巧，可以轻松地实现页面的纵向滚动，让用户感受到一种无限延伸的浏览体验。

body {
    overflow: hidden;
}
section {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s ease;
    z-index: 1;
}
section:nth-of-type(1) {
     /* 第一屏 */background-color: #ff7f50;
}
section:nth-of-type(2) {
     /* 第二屏 */background-color: #87cefa;
    top: 100vh;
}
section:nth-of-type(3) {
     /* 第三屏 */background-color: #90ee90;
    top: 200vh;
}
/* 翻页触发 */body.move section {
    transform: translateY(-100vh);
    z-index: 0;
}
/* 初始状态第一屏 */section:first-of-type {
    z-index: 1;
}
    

在上面的代码中，我们首先通过 `body` 的样式，将页面的滚动条隐藏起来。然后，我们给每个页面元素 `section` 设置了高度为 100vh，宽度为 100vw，并将它们定位到页面的左上角。我们使用了 CSS3 的动画过渡属性 `transition` 和 `transform` 来实现页面的平滑滚动效果。同时，通过 `z-index` 属性，我们使每个 `section` 元素的叠放顺序得以调整。

当用户翻页时，我们通过 `body` 的 `move` 类来触发页面的滚动动画，将当前屏幕上的 `section` 元素向上滑动一个屏幕的高度，同时将下一屏幕的 `section` 元素显示在视区中，这样就实现了页面的无限延伸。

通过以上的代码和说明，我们可以轻松的实现一款独特的纵向全屏翻页效果，并给用户带来全新的视觉体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！