htmlCSS简单进度条特效

通过如下的CSS代码
` .a{width: 600px;
height: 100px;

        border:slategray solid;

    }
    .b{
        width: 10%;
        height:100%;
        background-color: pink;
        transition: all 0.7s;
    }
    .b:hover{
        width: 100%;

    }`` 

以及如下的html代码调用实现简单进度条特效

<div class="a">
        <div class="b">

        </div>
    </div>

!
鼠标在粉色区域悬停会使粉色填满盒子