纯Css制作收据

使用纯CSS制作收据

通过CSS的边框、阴影和排版属性可以模拟收据的样式。以下是一个实现方法：

HTML结构

<div class="receipt">
  <div class="receipt-header">
    <h3>收据</h3>
    <p>编号: #12345</p>
  </div>
  <div class="receipt-body">
    <div class="item">
      <span>商品A</span>
      <span>$10.00</span>
    </div>
    <div class="item">
      <span>商品B</span>
      <span>$15.00</span>
    </div>
  </div>
  <div class="receipt-footer">
    <div class="total">
      <span>总计</span>
      <span>$25.00</span>
    </div>
    <p>感谢惠顾</p>
  </div>
</div>

CSS样式

.receipt {
  width: 300px;
  font-family: 'Courier New', monospace;
  background: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border: 1px dashed #ccc;
  margin: 20px auto;
}

.receipt-header {
  text-align: center;
  border-bottom: 1px dashed #333;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.receipt-body .item {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}

.receipt-footer {
  border-top: 1px dashed #333;
  margin-top: 15px;
  padding-top: 10px;
}

.receipt-footer .total {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 10px;
}

.receipt-footer p {
  text-align: center;
  font-style: italic;
}

添加收据撕边效果

可以通过伪元素创建撕边效果：

.receipt {
  position: relative;
}

.receipt::before,
.receipt::after {
  content: "";
  position: absolute;
  height: 10px;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(
    -45deg,
    white,
    white 5px,
    transparent 5px,
    transparent 10px
  );
}

.receipt::before {
  top: -10px;
}

.receipt::after {
  bottom: -10px;
}

收据打印机动画效果

添加打印动画增强真实感：

@keyframes print {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.receipt {
  animation: print 1s ease-out;
  transform-origin: top center;
}

响应式调整

确保在不同设备上显示正常：

@media (max-width: 400px) {
  .receipt {
    width: 90%;
    padding: 15px;
  }
}

这些CSS技巧组合可以创建出逼真的收据效果，包括撕边、打印动画和响应式布局。根据实际需求调整颜色、字体和尺寸即可获得不同风格的收据样式。