1. <div class="demo-container demo"><style>
  2. .demo{width:410px;}
  3. .stamp *{padding: 0;margin: 0;list-style:none;font-family:"Microsoft YaHei",'Source Code Pro', Menlo, Consolas, Monaco, monospace;}
  4. .stamp {
  5. width: 387px;
  6. height: 140px;
  7. padding: 0 10px;
  8. margin-bottom: 50px;
  9. position: relative;
  10. overflow: hidden;
  11. }
  12. .stamp:before {
  13. content: '';
  14. position: absolute;
  15. top:0;
  16. bottom:0;
  17. left:10px;
  18. right:10px;
  19. z-index: -1;
  20. }
  21. .stamp:after {
  22. content: '';
  23. position: absolute;
  24. left: 10px;
  25. top: 10px;
  26. right: 10px;
  27. bottom: 10px;
  28. box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
  29. z-index: -2;
  30. }
  31. .stamp i{
  32. position: absolute;
  33. left: 20%;
  34. top: 45px;
  35. height: 190px;
  36. width: 390px;
  37. background-color: rgba(255,255,255,.15);
  38. transform: rotate(-30deg);
  39. }
  40. .stamp .par{
  41. float: left;
  42. padding: 16px 15px;
  43. width: 220px;
  44. border-right:2px dashed rgba(255,255,255,.3);
  45. text-align: left;
  46. }
  47. .stamp .par p{color:#fff;font-size: 16px;
  48. line-height: 21px;}
  49. .stamp .par span{
  50. font-size: 50px;
  51. color:#fff;
  52. margin-right: 5px;
  53. line-height: 65px;
  54. }
  55. .stamp .par .sign{font-size: 34px;}
  56. .stamp .par sub{position: relative;top:-5px;
  57. color:rgba(255,255,255,.8);
  58. }
  59. .stamp .copy{
  60. display: inline-block;
  61. padding:21px 14px;
  62. width:100px;
  63. vertical-align: text-bottom;
  64. font-size: 30px;
  65. color:rgb(255,255,255);
  66. text-align: center;
  67. line-height: initial;
  68. }
  69. .stamp .copy p{font-size: 16px;margin-top: 15px;}
  70. .stamp01{
  71. background: #F39B00;
  72. background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);
  73. background-size: 15px 15px;
  74. background-position: 9px 3px;
  75. }
  76. .stamp01:before{
  77. background-color:#F39B00;
  78. }
  79. .stamp02{
  80. background: #D24161;
  81. background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);
  82. background-size: 15px 15px;
  83. background-position: 9px 3px;
  84. }
  85. .stamp02:before{
  86. background-color:#D24161;
  87. }
  88. .stamp03{
  89. background: #7EAB1E;
  90. background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);
  91. background-size: 15px 15px;
  92. background-position: 9px 3px;
  93. }
  94. .stamp03:before{
  95. background-color:#7EAB1E;
  96. }
  97. .stamp03 .copy{
  98. padding: 10px 6px 10px 12px;
  99. font-size: 24px;
  100. }
  101. .stamp03 .copy p{
  102. font-size: 14px;
  103. margin-top: 5px;
  104. margin-bottom: 8px;
  105. }
  106. .stamp03 .copy a{
  107. background-color:#fff;
  108. color:#333;
  109. font-size: 14px;
  110. text-decoration:none;
  111. padding:5px 10px;
  112. border-radius:3px;
  113. display: block;
  114. }
  115. .stamp04{
  116. width: 390px;
  117. background: #50ADD3;
  118. background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);
  119. background-size: 12px 8px;
  120. background-position: -5px 10px;
  121. }
  122. .stamp04:before{
  123. background-color:#50ADD3;
  124. left: 5px;
  125. right: 5px;
  126. }
  127. .stamp04 .copy{
  128. padding: 10px 6px 10px 12px;
  129. font-size: 24px;
  130. }
  131. .stamp04 .copy p{
  132. font-size: 14px;
  133. margin-top: 5px;
  134. margin-bottom: 8px;
  135. }
  136. .stamp04 .copy a{
  137. background-color:#fff;
  138. color:#333;
  139. font-size: 14px;
  140. text-decoration:none;
  141. padding:5px 10px;
  142. border-radius:3px;
  143. display: block;
  144. }
  145. </style>
  146. <div class="demo">
  147. <div class="stamp stamp01">
  148. <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
  149. <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
  150. <i></i>
  151. </div>
  152. <div class="stamp stamp02">
  153. <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
  154. <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
  155. <i></i>
  156. </div>
  157. <div class="stamp stamp03">
  158. <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
  159. <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
  160. <i></i>
  161. </div>
  162. <div class="stamp stamp04">
  163. <div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
  164. <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
  165. <i></i>
  166. </div>
  167. </div></div>

css3制作优惠券的更多相关文章

  1. css3 绘制优惠券

    今天偶然发现了一个css3制作动画的地方,发现css3的径向渐变好难理解,幸亏有这里的大神介绍http://www.daqianduan.com/5989.html,这是优惠券的介绍 还有这个http ...

  2. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  3. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  4. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  5. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  6. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  7. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  8. 网页特效:用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. BonBon - 使用 CSS3 制作甜美的糖果按钮

    BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...

随机推荐

  1. 从后端到页面:如何全方位监控 Ruby 应用?

    [编者按]本文参考技术分享 ,由 OneAPM 工程师补充整理,并且已经征得原作者的同意. 为什么选择 OneAPM ? 在性能监控领域,业界比较有名的是 New Relic 还有 Appdynami ...

  2. Amazon 面经

    [版面:待字闺中][首篇作者:gmadj] , 2013年09月29日21:51:33 [首页] [上页][下页][末页] [分页:1 2 ] gmadj 进入未名形象秀 我的博客     [回复] ...

  3. hdu 1275 两车追及或相遇问题

    思路:这里有2种情况: 一种是相遇:满足关系是 (va+vb)*t=L*(2*n-1) 一种是追及: 满足关系是 |va-vb|*t=L*(2*n-1) 这样求出2种情况的时间,在排序就可以了…… 链 ...

  4. *[topcoder]PalindromicSubstringsDiv2

    http://community.topcoder.com/stat?c=problem_statement&pm=12967 计算一个字符串里Palindrome的数量.我的DP方法需要n^ ...

  5. mysql表的一对一/一对多/多对多联系

    1.数据库中的多对多关联关系一般需采用中间表的方式处理,将多对多转化为两个一对多. 2.通过表的关系,来帮助我们怎样建表,建几张表. 一对一 一张表的一条记录一定只能与另外一张表的一条记录进行对应,反 ...

  6. 检测系统是X86系统,还是X64系统

    function IsWin64: Boolean; var Kernel32Handle: THandle; IsWow64Process: function(Handle: Windows.THa ...

  7. Windows系统上如何使用SSH

    Windows系统上如何使用SSH 传统的网络服务程序如FTP.Telnet等,在网络上一般使用明文传送数据.用户账号和口令信息,容易受到中间人的攻击.用户利用SSH协议后能有效防止DNS及IP欺骗, ...

  8. C++:运算符重载函数之成员运算符重载函数

    5.2.3 成员运算符重载函数 在C++中可以把运算符重载函数定义为某个类的成员函数,称之为成员运算符重载函数. 1. 定义成员运算符重载函数的语法形式 (1)在类的内部,定义成员运算符重载函数的格式 ...

  9. 基于Jws的WebService项目

    基于Jws的WebService项目   1.服务器端建立 1.1.创建接口 [java] view plaincopy @WebService  public interface IWebServi ...

  10. php命令行用法简介

    Php是一个非常流行的web服务端脚本语言.其实,php不仅仅可以在web服务器中充当重要角色.在命令行一样可以执行. 本文中,笔者为各位介绍下php在命令行中的使用方法. 1.  查看php的版本. ...