实现优惠券/卡券效果的CSS案例解析,使用径向渐变遮罩。
这是一个网页区域,设置其遮罩为镜像渐变效果。
webcate用法类似于background,渐变从中心点向外镜像扩散。
遮罩向右移动,再向上移动二十像素。
这样就制作出一个简单的卡券效果。原理类似于这样:向右移动,再向上移动,这是建立在重复平铺的基础上,向左移动则会得到另一个效果。将遮罩在水平方向缩小一倍,得到第三个效果。