css 折叠纸效果 |列表的css样式修改

.fold-box {
position: relative;
width: 200px;
height: 200px;
background-color: #f3f3f3;
border: 1px solid #ddd;
margin: 0 auto;
overflow: hidden;
}
.fold-box:before {
content: "";
position: absolute;
width: 105%;
height: 105%;
left: -2.5%;
top: -2.5%;
background-color: #fff;
transform: rotate(-30deg);
transform-origin: 0 0;
z-index: 2;
}
.fold-box:after {
content: "";
position: absolute;
width: 100%;
height: 50%;
left: 0;
top: 0;
background-color: #f3f3f3;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
transform: rotateX(45deg);
transform-origin: 50% 0;
z-index: 1;
}
.fold-box >div {
position: absolute;
width: 100%;
height: 50%;
left: 0;
background-color: #fff;
transform: rotateX(45deg);
transform-origin: 50% 100%;
z-index: 3;
}

以上是实现折叠纸效果的 CSS 代码。首先要有一个容器，容器上使用 before 和 after 伪元素分别实现前面的白色叠层和后面的阴影。容器内部再用一个 div 来实现折叠的纸片，通过 rotateX 和 transform-origin 来实现纸片的折叠效果。整个效果的神奇之处，在于伪元素的 transform 属性和容器内部的纸片 div 的 transform 属性组合起来，实现了折叠的效果。

通过使用这种 CSS 折叠纸效果，可以让大家的网站更加生动和有趣。如果您有兴趣的话，可以尝试在您的网站上应用这个效果，相信会为您的用户带来很大的惊喜和乐趣。