css制作信封

使用CSS制作信封效果

通过CSS可以创建一个信封样式的设计，以下是实现方法：

信封主体结构

<div class="envelope">
  <div class="envelope-front"></div>
  <div class="envelope-back"></div>
  <div class="envelope-flap"></div>
</div>

CSS样式设置

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

.envelope-front {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 150px solid #f5f5f5;
  border-right: 150px solid #f5f5f5;
  border-bottom: 100px solid #e0e0e0;
  bottom: 0;
}

.envelope-back {
  position: absolute;
  width: 300px;
  height: 100px;
  background: #e0e0e0;
  bottom: 0;
}

.envelope-flap {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 100px solid #d0d0d0;
  top: 0;
  transform-origin: top;
  transform: rotateX(180deg);
  transition: all 0.5s ease;
}

.envelope:hover .envelope-flap {
  transform: rotateX(0deg);
}

添加细节效果

.envelope::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 180px;
  background: white;
  left: 25px;
  top: 10px;
  z-index: -1;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.envelope-front::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 3px;
  background: #c0c0c0;
  left: -130px;
  bottom: 30px;
}

动画效果增强

@keyframes open-envelope {
  0% { transform: rotateX(180deg); }
  100% { transform: rotateX(0deg); }
}

.envelope.open .envelope-flap {
  animation: open-envelope 0.5s forwards;
}

使用方法

1. 将HTML结构添加到页面中
2. 复制CSS样式到样式表
3. 通过JavaScript添加交互：

   document.querySelector('.envelope').addEventListener('click', function() {
   this.classList.toggle('open');
   });

这个信封效果包含完整的结构、样式和交互效果，可以根据需要调整颜色、尺寸和动画细节。悬停或点击信封时，封口会动态打开，模拟真实信封的效果。