css制作纸片

使用CSS制作纸片效果

通过CSS的box-shadow和transform属性可以模拟纸片的立体感和层次感。以下是一个简单的实现方法：

.paper {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 
    0 1px 1px rgba(0,0,0,0.15),
    0 2px 2px rgba(0,0,0,0.15),
    0 4px 4px rgba(0,0,0,0.15),
    0 8px 8px rgba(0,0,0,0.15);
  transform: rotate(2deg);
  padding: 20px;
}

添加纸张纹理

为了使效果更逼真，可以添加纸张纹理背景：

.paper-textured {
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, transparent 1px),
    linear-gradient(to right, rgba(0,0,0,0.05) 0%, transparent 1px);
  background-size: 20px 20px;
}

创建折叠效果

使用伪元素模拟纸张折叠的边角：

.paper-folded {
  position: relative;
}

.paper-folded::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: #f0f0f0 #e0e0e0;
  box-shadow: -1px 1px 2px rgba(0,0,0,0.1);
}

实现纸张堆叠

多个纸片堆叠时，调整每个元素的旋转角度和阴影：

.paper-stack {
  position: relative;
}

.paper-stack div {
  position: absolute;
  background: white;
  width: 200px;
  height: 250px;
}

.paper-stack div:nth-child(1) {
  transform: rotate(2deg);
  z-index: 1;
}

.paper-stack div:nth-child(2) {
  transform: rotate(-1deg);
  z-index: 2;
}

.paper-stack div:nth-child(3) {
  transform: rotate(3deg);
  z-index: 3;
}

这些CSS技巧可以组合使用，根据具体需求调整参数值以达到理想的纸片视觉效果。