css3 配送进度

CSS3配送进度是网页设计中经常使用的一种元素，它可以让网站的用户了解到其商品到达的时间，为顾客提供不错的购物体验。下面是CSS3配送进度的使用方法。

.order-wrapper {
    width: 500px;
    margin: 0 auto;
    padding: 50px 0;
    text-align: center;
}
.step-number {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
    margin-right: 50px;
}
.step-number:before,.step-number:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}
.step-number:before {
    width: 2px;
    height: 100%;
    background: #e3e3e3;
    left: 29px;
}
.step-number:after {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e3e3e3;
    left: 19px;
}
.active-step {
    background: #f27c32;
}
.active-step:after {
    background: #fff;
}
.step-text {
    display: inline-block;
}
.step-title {
    font-weight: bold;
    margin-bottom: 5px;
}
.step-info {
    font-size: 14px;
}
    

首先定义一个包裹所有元素的div，设置该div的样式，使其在中间显示，同时设置了一些padding，让进度条距离顶部有一定的距离。接着定义每个步骤的样式，使用了伪元素:before和:after，加上背景色和圆角，使步骤更具有美感。

在当前步骤的样式中，设置了背景色样式并加上了一些额外的样式，使得当前步骤更加显著，更能够引起用户的注意。最后，定义每个步骤的文字样式，包括步骤的标题和信息描述。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！