纯 CSS 实现优惠券透明圆形镂空打孔效果

本文同步发布在：纯 CSS 实现优惠券透明圆形镂空打孔效果

我们在做商城类项目时，时常会有开发优惠券的需求，那么我们如何通过纯 CSS 来实现类似京东、淘宝的优惠券样式。

下面给大家分享一个纯 CSS 写的优惠券边沿透明圆形镂空打孔效果。最终效果大致如下：

直接上代码：

HTML

<div class="coupon"></div>

CSS

body {background: #939393;
}
.coupon {width: 590px;height: 370px;border-radius: 16px;overflow: hidden;background: #FFFFFF;position: relative;
}
.coupon:before, .coupon:after {content: '';position: absolute;width: 60px;height: 60px;border-radius: 50%;top: 50%;margin-top: -30px;background: #939393; /* 和背景一样的颜色 */
}
.coupon:before {left: -30px;
}
.coupon:after {right: -30px;
}

效果如下：

[scode type=“blue”]实现原理：在div中盖上两个和背景颜色一样的半圆达到镂空效果。[/scode]

其实这是一种伪镂空，如果背景下面有其他元素，可能就会“露馅”了，请看下图：

那么如何实现开篇的那种完全透明的镂空效果呢？我们可以把优惠券拆成上中下三块，中间那块通过构造透明半圆，白色背景用白色大边框替代，以达到相同效果，代码如下：

HTML

<div class="coupon"><div class="coupon-top"></div><div class="coupon-middle"><div></div></div><div class="coupon-bottom"></div>
</div>

CSS

body {background: #939393;
}
.coupon {width: 590px;height: 370px;border-radius: 16px;overflow: hidden;display: flex;flex-direction: column;
}
.coupon-top, .coupon-bottom {background: #FFFFFF;
}
.coupon-top {flex: 1;
}
.coupon-bottom {height: 120px;padding: 0 38px;
}
.coupon-middle {height: 64px;position: relative;overflow: hidden;
}
.coupon-middle div { /* 中间虚线 */position: absolute;left: 36px;right: 36px;top: 29px;border-top: 1px dashed #E6E6E6;z-index: 9;
}
.coupon-middle:before, .coupon-middle:after {content: '';border: 300px solid #FFFFFF;position: absolute;width: 60px;height: 60px;border-radius: 50%;top: 50%;margin-top: -330px;
}
.coupon-middle:before {left: -330px;
}
.coupon-middle:after {right: -330px;
}

再看下运行效果，大功告成！

本文同步发布在：纯 CSS 实现优惠券透明圆形镂空打孔效果

纯 CSS 实现优惠券透明圆形镂空打孔效果相关推荐

如何用纯 CSS 实现优惠券效果
背景本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
css让图片显示圆角纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...
纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
css3 乌云散去,纯css实现乌云密布的天气图标效果
效果效果如下实现思路使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影增加动画 dom结构用两个嵌套的div容器,父容器来 ...
CSS图像填充文字（镂空文字效果 / 文字镂空效果）
先展示一下最终效果: 开始做 1. 搭建基本代码结构 <!DOCTYPE html> <html><head><meta charset="utf- ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
《uni-app》移动端纯CSS实现不等高的瀑布流效果
<uni-app>移动端纯CSS实现不等高的瀑布流效果前言示例 WEB端示例移动端示例瀑布流实现第一种: flex 核心代码实现缺点完整代码第二种:column-coun ...
html气球飘落代码,纯CSS代码实现各类气球泡泡对话框效果
一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样 ...

纯 CSS 实现优惠券透明圆形镂空打孔效果

HTML

CSS

HTML

CSS

纯 CSS 实现优惠券透明圆形镂空打孔效果相关推荐

最新文章

热门文章