css信封制作

使用CSS创建信封效果

通过CSS可以模拟一个信封的视觉效果，主要利用边框、阴影和伪元素实现。以下是一个完整的实现方法：

HTML结构：

<div class="envelope">
  <div class="envelope-flap"></div>
  <div class="envelope-body">
    <!-- 信封内容 -->
  </div>
</div>

CSS样式：

.envelope {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto;
  perspective: 1000px;
}

.envelope-body {
  width: 100%;
  height: 100%;
  background: #f8f1e9;
  border: 2px solid #d4b483;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}

.envelope-flap {
  position: absolute;
  top: -20px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 100px solid #e8d9c5;
  transform-origin: top;
  transform: rotateX(30deg);
  z-index: 2;
}

添加交互效果

为信封添加悬停动画效果，模拟打开信封的动作：

.envelope:hover .envelope-flap {
  transform: rotateX(180deg);
  transition: transform 0.5s ease;
}

.envelope-body::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px dashed #d4b483;
  pointer-events: none;
}

响应式调整

使信封在不同屏幕尺寸下保持比例：

@media (max-width: 600px) {
  .envelope {
    width: 200px;
    height: 133px;
  }

  .envelope-flap {
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 67px solid #e8d9c5;
  }
}

添加信纸内容

在信封内添加可自定义的内容区域：

<div class="envelope-body">
  <div class="letter">
    <p>这里可以放置信件内容...</p>
  </div>
</div>

配套CSS：

.letter {
  padding: 20px;
  background: white;
  margin: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  min-height: 120px;
}

这些代码组合起来可以创建一个具有基本交互效果的CSS信封设计，可以根据需要调整颜色、尺寸和动画细节。