css3制作优惠券

2023-08-06 19:22:46

  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>
上一篇：市场不相信眼泪：AI第一股暴力裁员 惨了


下一篇：bower 基本应用