CSS实现各种优惠券效果

在CSS中，可以使用多种技术来实现各种优惠券的效果。以下是一个简单的优惠券效果的实现：

HTML:

<div class="coupon">
  <div class="coupon-content">
    <div class="coupon-title">优惠券</div>
    <div class="coupon-description">
      购买任何产品得<strong>5%</strong> off
    </div>
  </div>
  <div class="coupon-code">CODE123</div>
</div>

CSS:

.coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
 
.coupon-content {
  flex: 1;
}
 
.coupon-title {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}
 
.coupon-description {
  color: #666;
  font-size: 14px;
  margin-top: 10px;
}
 
.coupon-code {
  padding: 10px;
  background-color: #ff5353;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
}

这段代码创建了一个简单的优惠券卡片，左侧展示优惠内容，右侧展示优惠券码。通过CSS样式，我们为优惠券添加了背景颜色、边框圆角、阴影等视觉效果，以及添加了一些动感和交互，使其更加吸引人。