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 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
随机推荐
- (一)Knockout 计算属性
1 Computed 首先,创建一个view model如下: <body> <p>The fullname is: <span data-bind="text ...
- mysql case when * else end
分条件计算总数 SELECT -- SUM( END) as am, -- SUM( END) as om , -- SUM( END) as aom , -- SUM( then AmoutPric ...
- Java Spring Boot VS .NetCore (一)来一个简单的 Hello World
系列文章 Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filte ...
- 我的 Putty 配色方案
首先,右键单击 Putty 顶部边框,在弹出菜单中选择 Change settings,进入颜色设置 Category->Window->Colours 然后,按以下参数配置进行修改: D ...
- [Python]Python中的浅复制与深复制
看python的文档,发现list有copy方法,描述说效果同a[:]. 感觉有点惊讶,之前一直以为a[:]执行的是深复制. test了一下,发现确实如果a中存在可变对象,如list/set/dict ...
- composer install 时遇到 Composer\Downloader\TransportException ...
安装错误 [Composer\Downloader\TransportException] Invalid credentials for 'https://packagist.phpcomposer ...
- 使用CSS达到文字首尾对齐效果
在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如: <span>姓名:</span> <span>联系方式:</span> 姓名: 联系方式: ...
- 双接口(回调)promise cb
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Linux bash基础特性一
命令别名 alias cdnet=”cd /etc/sysconfig/network-scripts” 针对用户的别名: “~/.bashrc” 针对系统的别名:”/etc/bashrc” 重读配置 ...
- (72)Wangdao.com第十二天_JavaScript 错误处理机制
1. Error 实例对象 JavaScript 解析或运行时,一旦发生错误,引擎就会抛出一个错误对象. JavaScript 原生提供Error构造函数,所有抛出的错误都是这个构造函数的实例. va ...