[分享]css3屏幕上下滚动

CSS3是现代网页设计中不可或缺的一部分，它可以让我们实现各种炫酷的效果。屏幕上下滚动是一种非常常见的效果，下面来介绍如何使用CSS3实现。html, body{ margin: 0; padding...

CSS3是现代网页设计中不可或缺的一部分，它可以让我们实现各种炫酷的效果。屏幕上下滚动是一种非常常见的效果，下面来介绍如何使用CSS3实现。

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
}

.container{
    overflow: hidden;
    position: relative;
    height: 100%;
}

.container .section{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    transition: transform 0.6s ease-in-out;
}

.container .section:nth-child(2){
    background-color: #f6a821;
}

.container .section:nth-child(3){
    background-color: #1c1c1c;
}

.container .section:nth-child(4){
    background-color: #87ceeb;
}

.container .section.active{
    transform: translateY(0%);
} 

以上是实现屏幕上下滚动的CSS代码，其实实现的核心就是给每个页面添加相同的高度，并使其绝对定位。通过设置相同的宽度和高度，可以保持页面的一致性。

在代码中，需要用到一个特殊的CSS属性transform，这个属性可以让页面产生变形效果。首先，我们将容器设置为隐藏超出部分，然后将每个区块的位置设置为绝对定位，以便完成滚动效果。

最后，我们通过设置.transform属性的值，使当前区块位于视图区域的顶部，以此来实现页面的滚动效果。除此之外，我们还可以使用CSS3的伸缩盒模型来实现页面布局的自适应，让页面更加美观和易于浏览。