CSS快遞進度條效果

antzone發表於2017-12-29
CSS

有網購習慣的朋友可能會注意到一個快遞進度條功能，用來標識物流資訊。

非常直觀的瞭解貨物當前的位置，下面就分享一個類似的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.steps {
  width: 760px;
  height: 95px;
  position: relative;
  margin: 0 auto;
}
.first {
  position: absolute;
  width: 230px;
  height: 95px;
  position: absolute;
  top: 0;
  left: 0;
}
.first .big-circle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #DBD8D8;
  position: absolute;
  left: 60px;
  top: 31px;
  text-align: center;
}
.first .min-circle, .second .min-circle, .third .min-circle, .fourth .min-circle {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: inline-block;
  margin-top: 5px;
  text-align: center;
  line-height: 23px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background: #999;
}
.round_active {
  background: #02994C !important;
}
.first .title {
  position: absolute;
  top: 0;
  left: 50px;
  line-height: 24px;
  color: #8A8A8A;
}
.first .tame {
  position: absolute;
  left: 5px;
  bottom: 0;
  color: #A19F9D;
  font-size: 14px;
}
.first .big-line {
  width: 186px;
  height: 10px;
  background: #DDDEDE;
  position: absolute;
  left: 88px;
  top: 42px;
  text-align: center;
  z-index: 999;
}
.first .min-line, .second .min-line, .third .min-line, .fourth .min-line {
  width: 190px;
  height: 4px;
  margin-top: 3px;
  background: #999;
}
.line_active {
  background: #02994C !important;
}
.second {
  width: 210px;
  position: absolute;
  top: 0;
  left: 230px;
  height: 95px;
}
.second .big-circle, .third .big-circle, .fourth .big-circle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #DBD8D8;
  position: absolute;
  left: 43px;
  top: 31px;
  text-align: center;
}
.second .title, .fourth .title, .third .title {
  position: absolute;
  top: 0;
  left: 30px;
  line-height: 24px;
  color: #8A8A8A;
}
.second .tame, .third .tame, .fourth .tame {
  position: absolute;
  left: -10px;
  bottom: 0;
  color: #A19F9D;
  font-size: 14px;
}
.second .big-line, .third .big-line, .fourth .big-line {
  width: 186px;
  height: 10px;
  background: #DDDEDE;
  position: absolute;
  left: 71px;
  top: 42px;
  text-align: center;
  z-index: 999;
}
.third {
  width: 210px;
  position: absolute;
  top: 0;
  left: 440px;
  height: 95px;
}
.fourth {
  width: 210px;
  position: absolute;
  top: 0;
  left: 648px;
  height: 95px;
}
</style>
</head>
<body>
  <div class="steps">
    <div class="first">
      <div class="title">
        拍下商品
      </div>
      <div class="big-circle">
        <div class="min-circle round_active">
          √
        </div>
      </div>
      <div class="tame">
        2016年8月30日18:11:25
      </div>
      <div class="big-line">
        <div class="min-line line_active"></div>
      </div>
    </div>
    <div class="second">
      <div class="title">
        付款到支付寶
      </div>
      <div class="big-circle">
        <div class="min-circle round_active">
          √
        </div>
      </div>
      <div class="tame">
        2016年8月30日18:11:25
      </div>
      <div class="big-line">
        <div class="min-line line_active"></div>
      </div>
    </div>
    <div class="third">
      <div class="title">
        賣家發貨
      </div>
      <div class="big-circle">
        <div class="min-circle round_active">
          √
        </div>
      </div>
      <div class="tame">
        2016年8月30日18:11:25
      </div>
      <div class="big-line">
        <div class="min-line"></div>
      </div>
    </div>
    <div class="fourth">
      <div class="title">
        確認收貨
      </div>
      <div class="big-circle">
        <div class="min-circle">
          √
        </div>
      </div>
      <div class="tame">
        2016年8月30日18:11:25
      </div>
    </div>
  </div>
</body>
</html>

上面的程式碼實現我們的基本要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.steps {
  width: 760px;
  height: 95px;
  position: relative;
  margin: 0 auto;
}

快遞進度效果的容器，設定其為相對定位，那麼它的定位子元素位移以它為參考。

通過margin: 0 auto將其設定為水平居中。

[CSS] 純文字檢視 複製程式碼
.first {
  position: absolute;
  width: 230px;
  height: 95px;
  position: absolute;
  top: 0;
  left: 0;
}

快遞進度的第一個階段。

絕對定位，位移以它的steps父元素為參考。

[CSS] 純文字檢視 複製程式碼
.first .big-circle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #DBD8D8;
  position: absolute;
  left: 60px;
  top: 31px;
  text-align: center;
}

定義較大灰色的圓形區域。

通過絕對定位將其放置於一個合適區域。

[CSS] 純文字檢視 複製程式碼
.first .min-circle, .second .min-circle, .third .min-circle, .fourth .min-circle {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: inline-block;
  margin-top: 5px;
  text-align: center;
  line-height: 23px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background: #999;
}

定義較小深灰色的原型區域。

通過display: inline-block將div元素設定為內聯塊級元素，這樣父元素的text-align: center可以將其設定為居中。

[CSS] 純文字檢視 複製程式碼
.round_active {
  background: #02994C !important;
}

元素新增此樣式類之後，能夠優先將背景色設定為#02994C（綠色）。

[CSS] 純文字檢視 複製程式碼
.first .title {
  position: absolute;
  top: 0;
  left: 50px;
  line-height: 24px;
  color: #8A8A8A;
}

通過絕對定位，將標題設定於頂部。

[CSS] 純文字檢視 複製程式碼
.first .tame {
  position: absolute;
  left: 5px;
  bottom: 0;
  color: #A19F9D;
  font-size: 14px;
}

將時間通過絕對定位放置於底部。

[CSS] 純文字檢視 複製程式碼
.first .big-line {
  width: 186px;
  height: 10px;
  background: #DDDEDE;
  position: absolute;
  left: 88px;
  top: 42px;
  text-align: center;
  z-index: 999;
}

設定較粗灰色的橫線。

通過絕對定位將其放置於一個恰當的位置。

[CSS] 純文字檢視 複製程式碼
.first .min-line, .second .min-line, .third .min-line, .fourth .min-line {
  width: 190px;
  height: 4px;
  margin-top: 3px;
  background: #999;
}

快遞流程沒有完成時，較細深灰色的橫線。

[CSS] 純文字檢視 複製程式碼
.line_active {
  background: #02994C !important;
}

元素新增此樣式類之後，能夠優先將背景色設定為#02994C（綠色）。

二.相關閱讀：

（1）.相對定位參閱CSS position:relative 相對定位一章節。

（2）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（3）.border-radius參閱CSS3 border-radius一章節。

（4）.!important參閱CSS !important一章節。

相關文章