开发中实用CSS干货总结（三）CSS伪元素实现多步骤进度条

之前做一个收集用户信息的表单页面需要使用进度条显示用户目前填写到了第几步，不得不说CSS3伪类真的很好用，加上CSS动画加载的效果，不需要js代码就可以实现,进度条是灰色还是亮色通过active类名控制，两个icon的是合成的CSS Sprite图片通过坐标位置显示，背景图下载链接：(https://upload-images.jianshu.io/upload_images/13079544-9af1c6bf06398c8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

下面是效果图：

代码如下：

    
    
    



    

        
        第一步
    
    

        
        第二步
    
    

        
        第三步
    

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。