CSS快递进度条效果

2017-12-29 00:46| 作者: antzone| 查看: 4012| 评论: 0|来自: 蚂蚁部落

原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。

有网购习惯的朋友可能会注意到一个快递进度条功能，用来标识物流信息。

非常直观的了解货物当前的位置，下面就分享一个类似的效果。

代码实例如下:

[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一章节。

鲜花

握手

雷人

路过

鸡蛋

收藏分享

上一篇：css叉号关闭按钮效果下一篇：css3绘制跳动的红心详解

CSS快递进度条效果

最新评论