现在网上购物越来越普遍，很多商家也开始推出各种优惠券，以吸引消费者的购买。如何让这些优惠券更加吸引人？CSS可以帮我们实现优惠券特效，下面介绍一些常用的优惠券CSS特效。

/*1. 折扣提示*/
.discount {
position: relative;
display: inline-block;
}
.discount .tip {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background-color: #ff9800;
color: #fff;
padding: 2px 4px;
border-radius: 2px;
font-size: 12px;
}
/*2. 悬浮效果*/
.coupon:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
/*3. 旋转特效*/
.coupon.rotate {
position: relative;
display: inline-block;
}
.coupon.rotate .discount {
position: absolute;
top: -10px;
left: -10px;
background-color: #ff9800;
color: #fff;
padding: 8px;
border-radius: 2px;
font-size: 20px;
text-align: center;
transform: rotate(-45deg);
}
/*4. 背景变化*/
.coupon.bg-change {
padding: 10px;
background-color: #ff9800;
color: #fff;
display: inline-block;
transition: background-color .3s ease;
}
.coupon.bg-change:hover {
background-color: #454545;
}
/*5. 边框特效*/
.coupon.border {
padding: 10px;
border: 1px dashed #ff9800;
display: inline-block;
transition: border-color .3s ease;
}
.coupon.border:hover {
border-color: #454545;
}

以上就是常见的一些CSS优惠券特效了，可以根据实际需求选择使用。优惠券特效可以让用户对商品产生更强的购买欲望，提高转化率，而且实现起来非常简单。