[demo]用transition写一个进度条

CSS

        /* 进度条 */
        /* 先给外层一个边宽 */
        .box2{
            width: 600px;
            height: 30px;
            border: 2px solid #000;
            margin-top: 30px;
        }
        /* 写进度条里面动的条形 */
        .bar{
            /* 鼠标没进去之前是0宽度 */
            width: 0%;
            /* 记得.bar也要有高度 */
            height: 30px;
            /* 给背景色 */
            background-color: rgb(233, 144, 191);
            /* 要进行过渡效果处理的是里面的条形，所以过渡动画要加在里面的条形里面 */
            /* 加了过渡属性因为过渡的时间变慢，所以就会出现能看得到过程的width:0%-->width:100% */
            transition: 1s;
        }
        /* 鼠标悬停的时候让宽度达到100%  由于.bar没有宽度 悬停要加在外边框上，但是悬停的最终目的是改变.bar*/
        .box2:hover .bar{
            width: 100%;
        }

HTML

 <div class="box2">
        <div class="bar">
        </div>
 </div>

结果截图