H5 CSS3网页优惠券

  • 效果图
    H5 CSS3网页优惠券

  • demo下载
    URL

  • HTML

  <div class="coupon"> <div class="coupon-left"> <div class="coupon-inner"> <div class="coupon-money"> <span>¥</span> <span class="sum">100.00</span> </div> <div class="coupon-condition"> <p>满200.00可用</p> </div> </div> </div> <div class="coupon-right"> <div class="coupon-inner"> <div class="coupon-time"> 截止日期<br> 2216-12-31 </div> <i class="coupon-circle top"></i> <i class="coupon-circle bottom"></i> </div> </div> <div class="coupon-light"></div> </div>  <div class="coupon coupon-diabled"> <div class="coupon-left"> <div class="coupon-inner"> <div class="coupon-money"> <span>¥</span> <span class="sum">100.00</span> </div> <div class="coupon-condition"> <p>满200.00可用</p> </div> </div> </div> <div class="coupon-right"> <div class="coupon-inner"> <div class="coupon-time"> 截止日期<br> 2016-12-31 </div> <i class="coupon-circle top"></i> <i class="coupon-circle bottom"></i> </div> </div> <div class="coupon-light"></div> </div>
  • CSS
.coupon{position:relative;background:#d51d27;color:#fff;width:100%;height:95px;line-height:25px;overflow:hidden;margin-top:15px;} .coupon-diabled{background:#c3c3c3;color:#666;} .coupon:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .coupon-money .sum{font-size:25px;} .coupon-left{float:left;text-align:left;width:60%;font-size:12px;background:url(./circle-border-left.png) left center no-repeat;} .coupon-right{float:right;text-align: center;width:40%;font-size:14px;background:url(./circle-border-right.png) right center no-repeat;} .coupon-inner{padding:10px 15px;height:75px;position: relative;} .coupon-right .coupon-inner{border-left:2px dashed rgba(255,255,255,.5);} .coupon-money,.coupon-time{margin-top:12px;} .coupon-circle{display:inline-block;width:16px;height:16px;background:#fff;position: absolute;left:-9px;border-radius:50%} .coupon-circle.top{top:-8px;} .coupon-circle.bottom{bottom:-8px;} .coupon-light{position:absolute;top:20px;left:20%;height:150px;width:100%;background:rgba(255,255,255,.2);transform: rotate(-30deg);-webkit-transform: rotate(-30deg);-moz-transform: rotate(-30deg);}

原文链接:https://blog.csdn.net/lidysun/article/details/70156238?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316782246411588%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316782246411588&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-11-70156238-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容