css实现礼券效果
<template>
<div class="demo">
<div class="stamp stamp01">
<div class="par">
<p>XXXXXX折扣店</p>
<sub class="sign">¥</sub>
<span>50.00</span>
<sub>优惠券</sub>
<p>订单满100.00元</p>
</div>
<div class="copy">
副券
<p>
--
<br>--
</p>
</div>
<i></i>
</div> <div class="stamp stamp02">
<div class="par">
<p>XXXXXX折扣店</p>
<sub class="sign">¥</sub>
<span>50.00</span>
<sub>优惠券</sub>
<p>订单满100.00元</p>
</div>
<div class="copy">
副券
<p>
--
<br>--
</p>
</div>
<i></i>
</div> <div class="stamp stamp03">
<div class="par">
<p>XXXXXX折扣店</p>
<sub class="sign">¥</sub>
<span>50.00</span>
<sub>优惠券</sub>
<p>订单满100.00元</p>
</div>
<div class="copy">
副券
<p>
--
<br>--
</p>
<a href="#">立即使用</a>
</div>
<i></i>
</div> <div class="stamp stamp04">
<div class="par">
<p>XXXXXX折扣店</p>
<sub class="sign">¥</sub>
<span>50.00</span>
<sub>优惠券</sub>
<p>订单满100.00元</p>
</div>
<div class="copy">
副券
<p>
--
<br>--
</p>
<a href="#">立即使用</a>
</div>
<i></i>
</div>
</div>
</template> <script>
export default {
data() {
return {
sampleValue: "",
value1: "",
sampleValues: ""
};
}
};
</script> <style>
.demo {
width: 410px;
}
.stamp * {
padding: ;
margin: ;
list-style: none;
font-family: "Microsoft YaHei", "Source Code Pro", Menlo, Consolas, Monaco,
monospace;
} .stamp {
width: 387px;
height: 140px;
padding: 10px;
margin-bottom: 50px; position: relative;
overflow: hidden;
}
.stamp:before {
content: "";
position: absolute;
top: ;
bottom: ;
left: 10px;
right: 10px; z-index: -;
}
.stamp:after {
content: "";
position: absolute;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
box-shadow: 20px 1px rgba(, , , 0.5);
z-index: -;
} .stamp i {
position: absolute;
left: %;
top: 45px;
height: 190px;
width: 390px;
background-color: rgba(, , , 0.15);
transform: rotate(-30deg);
}
.stamp .par {
float: left;
padding: 16px 15px;
width: 220px;
border-right: 2px dashed rgba(, , , 0.3);
text-align: left;
}
.stamp .par p {
color: #fff;
font-size: 16px;
line-height: 21px;
}
.stamp .par span {
font-size: 50px;
color: #fff;
margin-right: 5px;
line-height: 65px;
}
.stamp .par .sign {
font-size: 34px;
}
.stamp .par sub {
position: relative;
top: -5px;
color: rgba(, , , 0.8);
}
.stamp .copy {
display: inline-block;
padding: 21px 14px;
width: 100px;
vertical-align: text-bottom;
font-size: 30px;
color: rgb(, , );
text-align: center;
line-height: initial;
}
.stamp .copy p {
font-size: 16px;
margin-top: 15px;
}
.stamp01 {
background: #f39b00;
background: radial-gradient(
rgba(, , , ) ,
rgba(, , , ) 5px,
#f39b00 5px
);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp01:before {
background-color: #f39b00;
}
.stamp02 {
background: #d24161;
background: radial-gradient(transparent , transparent 5px, #d24161 5px);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp02:before {
background-color: #d24161;
}
.stamp03 {
background: #7eab1e;
background: radial-gradient(transparent , transparent 5px, #7eab1e 5px);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp03:before {
background-color: #7eab1e;
}
.stamp03 .copy {
padding: 10px 6px 10px 12px;
font-size: 24px;
}
.stamp03 .copy p {
font-size: 14px;
margin-top: 5px;
margin-bottom: 8px;
}
.stamp03 .copy a {
background-color: #fff;
color: #;
font-size: 14px;
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
display: block;
} .stamp04 {
width: 390px;
background: #50add3;
background: radial-gradient(
rgba(, , , ) ,
rgba(, , , ) 4px,
#50add3 4px
);
background-size: 12px 8px;
background-position: -5px 10px;
}
.stamp04:before {
background-color: #50add3;
left: 5px;
right: 5px;
}
.stamp04 .copy {
padding: 10px 6px 10px 12px;
font-size: 24px;
}
.stamp04 .copy p {
font-size: 14px;
margin-top: 5px;
margin-bottom: 8px;
}
.stamp04 .copy a {
background-color: #fff;
color: #;
font-size: 14px;
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
display: block;
}
</style>
css实现礼券效果的更多相关文章
- css实现礼券效果2
<template> <div class="quan clear"> <div class="quanleft"> < ...
- css实现礼券效果3
<view class="coupon"> <view class="coupon-left"> </view> <v ...
- 原生JS、CSS实现的转盘效果(目前仅支持webkit)
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...
- CSS实现两端对齐效果
CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...
- 不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
随机推荐
- 【batch】命令对比两个文件夹下的文件(增删改的对比)
1.分别打印两个目录的结构 TREE D:\SOURCE /A /F >D:\SOURCE.TXT TREE D:\DEST /A /F >D:\DEST.TXT 2.然后使用工具/命令进 ...
- SSH阅读笔记
1.SSH单阶人脸段检测器,在不同层检测不同scale的人脸,而不是使用mtcnn中金字塔的方式,从而实现加速. 2.SSH的整体结构,3个module的stride分别为8,16,32,使用不同的感 ...
- day17递归函数(二分法查找)
递归函数: 如果函数包含了对其自身的调用,该函数就是递归的: example 1:二分法查找的实现: def find_recursion(l,aim,start=0,end=None): #end不 ...
- Windows Internals 笔记——进程
1.一般将进程定义成一个正在运行的程序的一个实例,由以下两部分构成: 一个内核对象,操作系统用它来管理进程,内核对象也是系统保存进程统计信息的地方. 一个地址空间,其中包含所有可执行文件或DLL模块的 ...
- Jmeter性能测试之基础知识(一)
1. 官网下载Jmeter: 点这里, 下载完成解压即可 2. 启动: 进入解压后的bin目录, Windows点击jmeter.bat, Linux执行jmeter 3. 添加线程组(user) : ...
- VICA 架构设计
本文记录最近完成的一个通用实时通信客户端的架构. 背景 我们公司是做税务相关的软件,有针对大客户 MIS 系统,也有针对中小客户的 SaaS 平台.这些系统虽然都是 B/S 的,但是也需要使用 Act ...
- 如何利用docker 构建golang线上部署环境
公司最近开发了一个项目是用golang 写的,现在要部署到线上环境去,又不想在服务器上装单独的golang,决定用docker 封装下,直接打到镜像里面,然后就直接在hub.docker.com上面搜 ...
- James Munkres Topology: Theorem 20.4
Theorem 20.4 The uniform topology on \(\mathbb{R}^J\) is finer than the product topology and coarser ...
- numpy array分割-【老鱼学numpy】
有合并,就有分割. 本节主要讲述如何通过numpy对数组进行横向/纵向分割. 横向/纵向分割数组 首先创建一个6行4列的数组,然后我们对此数组按照横向进行切割,分成3块,这样每块应该有2行,见例子: ...
- 微信小程序--家庭记账本开发--06
重要部分学习——记账簿 本次项目开发的目的主要是记账本的开发,最初自己想法简单,把家里的纸质记账簿变成手机上的记账簿.最终自己程序可以实现的功能可以记录每天的账目信息,并形成叠加效果,并按1.2.3… ...