如何用纯 CSS 实现优惠券效果

·  阅读 32
如何用纯 CSS 实现优惠券效果

背景

本文来自CODE.FUN  ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家。

优惠券视觉效果

上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有帮助。

0. 分析

首先,我们来分析一下这个优惠券的实现方案。

左边是摘要,右边是详情,这个部分用 display:flex 很容易就能搞定。中间的虚线,使用任意一个容器边框 + 少许 padding 即可实现。其它部分,也就是些字体行高,都不是很复杂。难点在于投影,尤其是左右两个挖空的半圆。

1. 尝试实现挖空效果

  1. 首先,我们给整个优惠券矩形加上投影
  2. 然后,我们给两边加上两个包含内投影的圆形
  3. 这个时候,两边的内投影原型会多出来一块,我们需要把它们盖住。但是,不能让矩形 overflow:hidden,因为投影也会变,如下图。

.coupon {
  width15rem;
  height6rem;
  background: white;
  box-shadow1px 1px 6px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
  
  &::before,
  &::after {
    background-color: white; 
    border-radius1rem;
    box-shadow: inset 1px 1px 6px rgba(0000.15);
    content'';
    width2rem;
    height2rem;
    position: absolute;
    top2rem;
    z-index1;
  }  

  &::before {
    left: -1rem;
  }
  &::after {
    right: -1rem;
  }
}
复制代码

2. 增加父容器

我的第一反应是增加父容器,让父容器 overflow:hidden 来隐藏多出来的部分。但是不行,会影响投影。

但是转念一想,我们可以不让父容器限制显示内容,而是在父容器内部增加一些元素,遮蔽多出来的内容。比如用两个纯色圆形,把竖着的阴影遮起来。

于是我把上面的样式更名为 .coupon-inner,然后增加一个父容器。父容器的 ::before ::after 伪元素都搞成略小一圈的纯色圆形,把竖着的投影挡住,最终效果如下图。

3. 总结

到这里,效果就基本让人满意了。最终完成的代码如下:

.coupon {
  width15rem;
  height6rem;
  position: relative;
  
  &::before,
  &::after {
    content'';
    position: absolute;
    topcalc(2rem + 2px);
    widthcalc(2rem - 4px);
    heightcalc(2rem - 4px);
    background-color: white;
    z-index2;
  }  

  &::before {
    left: -1rem;
    border-radius0 calc(1rem - 2pxcalc(1rem - 2px0;
  }

  &::after {
    right: -1rem;
    border-radiuscalc(1rem - 2px0 0 calc(1rem - 2px);
  }
}

.coupon-inner {
  width100%;
  height100%;
  background: white;
  box-shadow1px 1px 6px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
  
  &::before,
  &::after {
    background-color: white; 
    border-radius1rem;
    box-shadow: inset 1px 1px 6px rgba(0000.15);
    content'';
    width2rem;
    height2rem;
    position: absolute;
    top2rem;
    z-index1;
  }

  &::before {
    left: -1rem;
  }

  &::after {
    right: -1rem
  }
}
复制代码

你也可以在 codepen 里做进一步的调整:

前往 CodePen

使用纯 CSS 的好处,在于体积小、加载快,调整起来非常灵活。我们建议前端开发者,能用 CSS 最好都用 CSS。

有任何问题和建议,欢迎评论、讨论。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改