css3優惠券效果程式碼例項

antzone發表於2017-03-24
原文網址 : https://www.softwhy.com/article-4406-1.html
CSSS3

分享一段程式碼例項，它利用css3實現了優惠券效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #fff;
  font-family: "Microsoft YaHei";
}
.coupon-wrap{
  width: 600px;
  height: 230px;
  margin: 50px auto 0;
  border-radius: 4px;
  overflow: hidden;
}
.coupon-container{
  height: 230px;
  overflow: hidden;
}
.coupon-left{
  width: 457px;
  height: 100%;
  background-color: #ff7171;
  color: #fff;
  padding: 14px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  float: left;
}
.coupon-left:before{
  content: "";
  width: 32px;
  height: 32px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: -16px;
  margin-top: -16px;
  border-radius: 50%;
  z-index: 1;
}
.coupon-left-content{
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px #fff;
  border-radius: 4px;
  position: relative;
}
.coupon-left-content:before{
  content: "";
  width: 20px;
  height: 40px;
  background-color: #ff7171;
  position: absolute;
  top: 50%;
  left: -5px;
  margin-top: -20px;
  border-radius: 0 40px 40px 0;
  border-right: 1px solid #fff;
}
.coupon{
  font-size: 200px;
  color: rgba(241, 241, 241, .1);
  position: absolute;
  top: -50px;
  left: -100px;
  box-shadow: 0 0 0 1px rgba(241, 241, 241, .1);
  border-radius: 50%;
  padding: 10px;
}
.coupon-left-content-text{
  text-align: center;
  font-size: 2em;
}
.coupon-left-content-text span{
  font-size: 4em;
}
.coupon-right{
  width: 143px;
  height: 100%;
  float: right;
  background-color: #ffb8b8;
  position: relative;
}
.coupon-right:before{
  content: "";
  width: 38px;
  height: 38px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  right: -19px;
  margin-top: -19px;
  border-radius: 50%;
  z-index: 1;
}
.coupon-right:after{
  content: "· · · · · · · · · · · · · · · · · · ·";
  width: 10px;
  font-size: 70px;
  color: #fff;
  position: absolute;
  top: -11px;
  left: -8px;
  line-height: 22px;
}
.coupon-right-content{
  width: 120px;
  height: 200px;
  background-color: #fff1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -60px;
  margin-top: -100px;
  border-radius: 4px;
}
.coupon-right-content:after,.coupon-right-content:before{
  content: "";
  width: 14px;
  height: 14px;
  background-color: #ffb8b8;
  position: absolute;
  left: 0;
}
.coupon-right-content:after{
  border-radius: 0 14px 0 0;
  bottom: 0;
}
.coupon-right-content:before{
  border-radius: 0 0 14px 0;
  top: 0;
}
.coupon-right-content-text{
  width: 50px;
  font-size: 48px;
  color: #ff7171;
  margin: 0 auto;
}
.coupon-right-content-text:before{
  content: "";
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #ffb8b8;
  position: absolute;
  top: 50%;
  right: -37px;
  margin-top: -29px;
}
</style> 
</head>  
<body> 
<div class="coupon-wrap">
  <div class="coupon-container">
    <div class="coupon-left">
      <div class="coupon-left-content">
        <div class="coupon">券</div>
        <div class="coupon-left-content-text">￥<span class="price">1500</span></div>
      </div>
    </div>
    <div class="coupon-right">
      <div class="coupon-right-content">
        <div class="coupon-right-content-text">優惠券</div>
      </div>
    </div>
  </div>
</div>
</body> 
</html>

相關文章