当前位置：首页 > CSS

css制作纸片

2026-01-28 11:22:35CSS

CSS 纸片效果实现方法

通过CSS的box-shadow和transform属性可以模拟纸片的立体效果，以下是具体实现方式：

基础纸片样式

.paper {
  width: 200px;
  height: 300px;
  background: white;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

添加立体阴影

.paper::before, .paper::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 98%;
  height: 98%;
  background: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.paper::before {
  right: 1%;
  bottom: 0;
  transform: rotate(1deg);
}

.paper::after {
  left: 1%;
  bottom: 0;
  transform: rotate(-1deg);
}

卷角效果（可选）

css制作纸片

.paper {
  background: linear-gradient(135deg, transparent 15px, white 0);
}

.paper::before {
  background: linear-gradient(135deg, transparent 15px, #f0f0f0 0);
}

动态悬浮效果

.paper:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

高级纸片变形效果

3D旋转效果

css制作纸片

.paper-3d {
  transform-style: preserve-3d;
  transform: rotateY(15deg) rotateX(5deg);
  box-shadow: -10px 10px 20px rgba(0,0,0,0.2);
}

多层堆叠效果

.paper-stack {
  position: relative;
}

.paper-stack::before {
  content: "";
  position: absolute;
  width: 95%;
  height: 95%;
  bottom: -5px;
  left: 2.5%;
  background: #f5f5f5;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

实际应用示例

HTML结构

<div class="paper">
  <h3>纸片标题</h3>
  <p>这里是纸片内容...</p>
</div>

完整CSS代码

.paper {
  width: 250px;
  padding: 20px;
  margin: 30px auto;
  background: white;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3),
              0 0 40px rgba(0,0,0,0.1) inset;
  border: 1px solid #f0f0f0;
}

.paper::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 96%;
  height: 96%;
  bottom: 2%;
  left: 2%;
  background: white;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  transform: rotate(-0.5deg);
}

通过调整阴影参数、旋转角度和层叠顺序，可以创建出不同风格的纸片效果。实际应用中可根据设计需求微调各个参数值。