京东进度条制作（添加过渡属性）

首先里面是有两个盒子，大盒子包含小盒子。

<div class="bar">

<div class="bar_in">

</div>

</div>

CSS样式：

/*大盒子样式*/

.bar{

width: 130px;

height: 12px;

border: 1px solid red;

/*把长方形变成圆角矩形直接写高度就行了*/

border-radius: 12px;

}

小盒子样式

.bar_in{

    width: 70%;

    height: 12px;

    background-color: red;

    /* 添加-1进度条不会有空隙 */

    margin-top: -1px;

    /* 让盒子的左上角和左下角与大盒子重合 */

    border-radius: 12px 0 0 12px;

    /* 谁做过渡给谁加 */（也可以不添加过渡）

    transition: all .5s;

}

.bar:hover .bar_in{

    width: 100%;

    border-radius: 12px;

}