css3實現的打折卡效果程式碼例項

antzone發表於2017-03-06
CSSS3

分享一段程式碼例項，它利用css3實現打折卡效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  box-sizing:border-box;
}
body{
  margin:0; 
  padding:0; 
  background:#F5F5F5;
}
.container{
  margin:0 auto;
  width:100%;
  height:100%;
  max-width:640px;
}
.card-detail{
  position:relative;
  margin-top:10px;
  width:100%;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.card-detail:first-child{
  margin-top:0;
}
.card-detail-left,.card-detail-right{
  position:relative;
  float:left;
}
.card-detail-left{
  width:25%;
}
.bd1{
  border-right:1px dashed #BE8307;
}
.bd2{
   border-right: 1px dashed #75A0BD;
}
.bd3{
  border-right: 1px dashed #A5A5A5;
}
.card-detail-left-top{
  width:100%;
  height:120px;
  border-radius:8px 0 0 0;
}
.card-detail-left-top.bg1{
  background-color: #FEAC00;        
}
.card-detail-left-top.bg2{
  background-color: #1186D6;        
}
.card-detail-left-top.bg3{
  background-color: #7F7F7F;        
}
.card-detail-left-top:before,.card-detail-left-top:after{
  content:"";
  position:absolute;
  right:-8px;
  display:block;
  width:16px;
  height:16px;
  background-color:#F5F5F5;
  border-radius:50%;
  z-index:11;
}
.card-detail-left-top:after{
  top:-10px;
}
.card-detail-left-top:before{
  bottom:-10px;
}
.card-detail-left-bottom{
  width:100%;
  height:40px;
  background-color:#fff;
  border-radius:0 0 0 8px;
}
.left-circle{
  position:absolute;
  top:50%;
  left:-25px;
  margin-top:-25px;
  width:50px;
  height:50px;
  background-color:#F5F5F5;
  border-radius:50%;
}
.card-detail-right{
  position:relative;
  overflow:hidden;
  -webkit-box-flex:1;
    -webkit-flex:1;
            -ms-flex:1;
                  flex:1;
}
.overdue{
  position:absolute;
  right:5px;
  bottom:0;
  width:140px;
  z-index:11;
}
.card-detail-right-top{
  position:relative;
  height:120px;
  border-radius:0 8px 0 0;
}
.card-detail-right-top.bg1{
  background-color:#FFC13E;
}
.card-detail-right-top.bg2{
  background-color:#6AB7EC;
}
.card-detail-right-top.bg3{
  background-color:#9E9E9E;
}
.card-detail-right-top div:nth-child(1){
  position:absolute;
  top:20px;
  right:20px;
  color:rgba(255, 255, 255, .8);
  font-size:16px;
}
.card-detail-right-top div:nth-child(2){
  position:absolute;
  top:35px;
  right:100px;
  color:#fff;
  font-size:25px;
}
.card-detail-right-top div:nth-child(2) span{
  margin-left:5px;
  font-size:60px;
}
.card-detail-right-top div:nth-child(3){
  position:absolute;
  top:40px;
  right:25px;
  color:#B87D01;
  font-size:30px;
}
.card-detail-right-top div:nth-child(3).c1,
.card-detail-right-top div:nth-child(4).c1{
  color:#2671A5;
}
.card-detail-right-top div:nth-child(3).c2,
.card-detail-right-top div:nth-child(4).c2{
  color:#5C5C5C;
}
.card-detail-right-top div:nth-child(4){
  position:absolute;
  margin-top:5px;
  top:70px;
  right:20px;
  color:#B87D01;
  font-size:16px;
}
.card-detail-right-bottom{
  width:100%;
  padding-left:8px;
  padding-right:8px;
  height:40px;
  font-size:14px;
  background-color:#fff;
  border-radius:0 0 8px 0;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between;
}
.card-detail-right-bottom span:nth-child(2){
  text-align:right;
}
</style>
</head>
<body>
<div class="container">
  <div class="card-detail clearfix">
        <!-- 左邊大色塊 -->
        <div class="card-detail-left">
                <div class="card-detail-left-top bg1 bd1">
                        <!-- 左邊半圓 -->
                        <div class="left-circle"></div>
                </div>
                <div class="card-detail-left-bottom bd1"></div>
        </div>
        <!-- 右邊大色塊 -->
        <div class="card-detail-right">
                <div class="card-detail-right-top bg1">
                        <div>大眾點評</div>
                        <div>￥<span>5</span></div>
                        <div>全品</div>
                        <div>優惠紅包</div>
                </div>
                <div class="card-detail-right-bottom">
                        <span>使用期限：2016.6.4-2016.6.5</span>
                        <span>未使用</span>
                </div>
        </div>
</div>
<div class="card-detail clearfix">
        <!-- 左邊大色塊 -->
        <div class="card-detail-left">
                <div class="card-detail-left-top bg2 bd2">
                        <!-- 左邊半圓 -->
                        <div class="left-circle"></div>
                </div>
                <div class="card-detail-left-bottom bd2"></div>
        </div>
        <!-- 右邊大色塊 -->
        <div class="card-detail-right">
                <div class="card-detail-right-top bg2">
                        <div>大眾點評</div>
                        <div>￥<span>5</span></div>
                        <div class="c1">全品</div>
                        <div class="c1">優惠紅包</div>
                </div>
                <div class="card-detail-right-bottom">
                        <span>使用期限：2016.6.4-2016.6.5</span>
                        <span>已使用</span>
                </div>
        </div>
</div>
<div class="card-detail clearfix">
        <!-- 左邊大色塊 -->
        <div class="card-detail-left">
                <div class="card-detail-left-top bg3 bd3">
                        <!-- 左邊半圓 -->
                        <div class="left-circle"></div>
                </div>
                <div class="card-detail-left-bottom bd3"></div>
        </div>
        <!-- 右邊大色塊 -->
        <div class="card-detail-right">
                <div class="card-detail-right-top bg3">
                        <div>大眾點評</div>
                        <div>￥<span>50</span></div>
                        <div class="c2">全品</div>
                        <div class="c2">優惠紅包</div>
                </div>
                <div class="card-detail-right-bottom">
                        <span>使用期限：2016.6.4-2016.6.5</span>
                        <span>已過期</span>
                </div>
        </div>
  </div>
</div>
</body>
</html>

相關文章