css3卷起来的效果,css实现优惠券

CSS3中提供了一种卷起来的效果，可以用来实现优惠券等特殊效果。这种效果可以通过一些CSS属性和伪元素来实现。

我们可以使用`transform`属性来实现元素的旋转和缩放效果。通过设置`scale`属性为0，可以将元素缩小为原来的0倍，实现元素卷起来的效果。

示例代码如下所示：

.coupon {
  width: 200px;
  height: 100px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.coupon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  transform-origin: top left;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}
.coupon:hover {
  transform: scale(0.9);
}
.coupon:hover::before {
  transform: scaleY(1);
}

在上面的示例代码中，我们创建了一个类名为`.coupon`的元素，设置了宽度、高度、背景颜色和边框等样式。为了实现卷起来的效果，我们将其设置为相对定位(`position: relative`)并设置了`overflow: hidden`属性，以隐藏超出容器的部分。

接下来，我们使用伪元素`::before`来创建一个与`.coupon`元素大小相同的红色背景层，并将其设置为绝对定位(`position: absolute`)，位于`.coupon`元素的顶部左侧。

为了实现卷起来的效果，我们将`.coupon`元素的`transform-origin`属性设置为左上角(`top left`)，并将其`transform`属性的`scaleY`值设置为0，即将其在垂直方向上缩放为0倍。我们还为`.coupon::before`伪元素添加了过渡效果(`transition`)，使其在0.3秒内从0缩放到1。

当鼠标悬停在`.coupon`元素上时，我们通过设置其`transform`属性的`scale`值为0.9，使其缩小为原来的0.9倍。我们还通过设置`.coupon:hover::before`选择器来实现当鼠标悬停时，将`.coupon::before`伪元素的`transform`属性的`scaleY`值设置为1，即将其在垂直方向上恢复原始大小。

通过以上的CSS代码，我们可以实现一个优惠券卷起来的效果。这种效果不仅可以应用于优惠券，还可以用于其他需要特殊效果的场景，如折叠面板、展开菜单等。