一、制作静态的紫色条纹进度条
html代码：

XML/HTML Code 复制内容到剪贴板 <body>   < div   class = "progress-bar purple" >   < span   style = "width:40%;" > </ span >   </ div >    </ body >   

css代码：

CSS Code 复制内容到剪贴板 body {      background-color : #333 ;    }    .progress-bar {      background-color : #222 ;      border -radius: 3px ;      width : 300px ;      height : 24px ;      padding : 5px ;      margin : 50px ;      border-bottom : 1px   solid   #444 ;     box-shadow: inset  0 0  2px  0  #000 ;    }    .progress-bar span {      display : inline - block ;      width : 140px ;      height : 24px ;             border -radius: 2px ;     box-shadow:0  1px  0 rgba(255, 255, 255, 0.5)  inset ;     -moz-box-shadow:0  1px  0 rgba(255, 255, 255, 0.5)  inset ;     -webkit-box-shadow:rgba(255,255,255,0.5) 0  1px  0  inset ;    }    . purple  span{      background-color : #F09 ;      background-image :-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%,  transparent  25%,  transparent  50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%,  transparent  75%);      background-image :-webkit-gradient(linear,0 100%,100% 0, color -stop(25%,rgba(255,255,255,0.3)), color -stop(25%, transparent ), color -stop(50%, transparent ), color -stop(50%,rgba(255,255,255,0.3)), color -stop(75%,rgba(255,255,255,0.3)), color -stop(75%, transparent ));      background - size : 16px   16px ;    }  

最终效果如下图所示：

二、制作静态的蓝色进度条
html代码：

XML/HTML Code 复制内容到剪贴板 <div class="progress-bar orange"> <span style="width:60%;"></span> </div>  

css代码：

CSS Code 复制内容到剪贴板 .orange span{      background-image :-webkit-gradient(linear,0% 0%,0% 100%,from( #fecd22 ),to( #fd9415 ));      background-image :-moz-linear-gradient(-90deg, #fecd22 , #fd9415 );    }  

最终效果如下图所示：

三、制作静态的绿色进度条
html代码：

XML/HTML Code 复制内容到剪贴板 <div> <span style="width:80%;"></span> </div>  

css代码：

CSS Code 复制内容到剪贴板 .green span{      background-color : #00ff24 ;     box-shadow:rgba(255,255,255,0.7)0  5px   5px  inser,rgba(255,255,255,0.7)0 - 5px   5px   inset ;     -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0  5px   5px   inset , rgba(255, 255, 255, 0.7) 0 - 5px   5px   inset ;     -moz-box-shadow:rgba(255, 255, 255, 0.7) 0  5px   5px   inset , rgba(255, 255, 255, 0.7) 0 - 5px   5px   inset ;    }  

最终效果如下图所示：

四、为紫色条纹添加动态效果
css代码：

CSS Code 复制内容到剪贴板 .purple span:hover{     -webkit-animation:animate-stripes 3s linear infinite;     -moz-animation:3s linear 0s  normal   none  infinite animate-stripes;    }    @-webkit-keyframes animate-stripes {    0% { background-position : 0 0;} 100% { background-position :  60px  0;}    }    @-moz-keyframes animate-stripes {    0% { background-position : 0 0;} 100% { background-position :  60px  0;}    }  

鼠标放上去之后，动态效果会出现。