51dev.com IT技术开发者社区

51dev.com 技术开发者社区

小程序中css3实现优惠券

代码星球阅读(9)2020-08-02 收藏0次评论

效果如下:

css3实现优惠券

知识储备

  • 颜色渐变 linear-gradient()
  • css伪类 :before :after

index.wxss

  1 .app {
  2   /* padding: 20rpx 40rpx; */
  3   padding: 20rpx;
  4   background: #eee;
  5 }
  6 .wrapper {
  7   margin: 0 auto;
  8   width: 100%;
  9   display: flex;
 10   background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1));
 11   /*实现颜色渐变 */
 12 }
 13 /*前半部分样式*/
 14 .content {
 15   position: relative;
 16   flex: 1;
 17   padding: 20rpx 30rpx;
 18   text-align: center;
 19 }
 20 /*后半部分样式*/
 21 .tip {
 22   position: relative;
 23   padding:  50rpx 30rpx;
 24   flex: 0 0 200rpx;
 25   text-align: center;
 26 }
 27 /*中间竖直虚线样式*/
 28 .split-line {
 29     position: relative;
 30     flex: 0 0 0;
 31     margin: 0 10rpx 0 6rpx;
 32     border-left: 4rpx dashed #eee;   
 33 }
 34 /*给虚线加两个伪类,基本样式如下*/
 35 .split-line:before, .split-line:after {
 36     content: '';
 37     position: absolute;
 38     width: 32rpx;
 39     height: 16rpx;
 40     background: #eee;
 41     left: -18rpx;
 42     z-index: 1;
 43 }
 44 /*给前半部分加两个伪类,基本样式如下*/.content:before, .content:after{
 45     content: '';
 46     position: absolute;
 47     width: 32rpx;
 48     height: 16rpx;
 49     background: #eee;
 50     left: -16rpx;
 51     z-index: 1;
 52 }
 53 
 54 /*给前半部分加两个伪类,基本样式如下*/
 55 .tip:before, .tip:after{
 56     content: '';
 57     position: absolute;
 58     width: 32rpx;
 59     height: 16rpx;
 60     background:#eee;
 61     right: -16rpx;
 62     z-index: 1;
 63 }
 64 /*几个伪类化成的圆弧的样式以及位置(置于顶部)我把它放在一起了*/
 65 .content:before, .tip:before, .split-line:before{
 66     border-radius: 0 0 16rpx 16rpx;
 67     top: 0;
 68 }
 69 
 70 /*几个伪类化成的圆弧的样式以及位置(置于底部)我把它放在一起了*/
 71 .content:after, .tip:after, .split-line:after{
 72     border-radius: 16rpx 16rpx 0 0;
 73     bottom: 0;
 74 }
 75 
 76 .money {
 77   font-size: 110rpx;
 78   color: #eee;
 79 }
 80 .money text {
 81   font-size: 50rpx;
 82   padding-right: 20rpx; 
 83 }
 84 .title {
 85   color: #eee;
 86   font-size: 30rpx;
 87 }
 88 .conditions {
 89   color: #eee;
 90   font-size: 30rpx;
 91   padding:15rpx;
 92 }
 93 .useNow {
 94   color: rgba(254,50,103,1);
 95   font-size: 30rpx;
 96   border-radius: 50rpx;
 97   border-style: none;
 98 }
 99 .co {
100   padding-top:10rpx; 
101 }
102 .co .co_w {
103   width: 64rpx;
104   height: 1rpx;
105   background: #fff;
106   margin-left: 60rpx;
107   margin-bottom: -20rpx;
108 }
109 
110 .co .co_l {
111   width: 64rpx;
112   height: 1rpx;
113   background: #fff;
114   margin-left: 260rpx;
115   margin-top: -15rpx;
116 }
117 index.wxml
118 <view class="app">
119   <view class="wrapper">
120     <view class="content">
121         <view class="money">
122           <text>¥</text>50
123         </view>
124       <view class='co'>
125         <view class='co_w'></view>
126         <view class="title">
127           优惠券
128         </view>
129         <view class='co_l'></view>
130       </view>
131     </view>
132     <view class="split-line"></view>
133     <view class="tip">
134       <view class="conditions">
135         满500元使用
136       </view>
137       <button class="useNow" bindtap="">
138       立即使用
139       </button>
140     </view>
141   </view>
142 </view>
143  

 

以上就是小程序中css3实现优惠券的全部内容。

上一篇: idea15破解
下一篇: 小程序app.js小结