css景深可滚动 |laravel mix 压缩css

.container {
width: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
perspective: 1000px;
}
.layer {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform-style: preserve-3d;
}
.layer:nth-child(1) {
background-image: url('layer1.jpg');
transform: translateZ(0);
}
.layer:nth-child(2) {
background-image: url('layer2.jpg');
transform: translateZ(-100px);
}
.layer:nth-child(3) {
background-image: url('layer3.jpg');
transform: translateZ(-200px);
}
.layer:nth-child(4) {
background-image: url('layer4.jpg');
transform: translateZ(-300px);
}

以上CSS代码用于实现一个四层景深可滚动的页面。首先，大家需要一个具备滚动功能的容器，这里大家设置了宽度为100%、高度为视口高度、overflow-x为hidden、overflow-y为scroll的.container。接下来，大家设置了四个背景图分别绑定在四个.layer层上。其中，nth-child()伪类用于选择第n个标签。在.layer中，大家设置了position为absolute，top为0，然后通过transform-style:preserve-3d属性打开3D视图。通过transform:translateZ()属性来控制每一个.layer的位置，达到层叠效果的目的。

总体来说，景深可滚动效果能够提升网页的交互性和观赏性，但是也需要谨慎使用，过度的视差效果可能对用户体验产生反效果。