1.效果分析

純CSS3實現進度條的製作，效果如下圖所示，詳見----demo----

2.難點分析

圓角邊框，內陰影，

漸變填充實現斜紋效果

斜紋動畫

3.實現步驟

a.html架構

<div class="progressBar blue stripes">
      <span></span>
</div>
<div class="progressBar orange stripes">
      <span></span>
</div>

.progressBar{
	margin: 50px auto;
	padding: 5px;
	width: 360px;
	height: 20px;
	background-color: #1a1a1a;
	border-radius: 4px;
	box-shadow: 0 1px 5px #000 inset;
}
 

.progressBar span{
	display: inline-block;
	height: 100%;
	width: 60%;
	background-color: #777;
	border-radius: 3px;
	box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
	transition:all .5s ease;
	position: relative;
	z-index: 1;
}
.progressBar:hover span{
	width: 100%;
	cursor: pointer;
}

.blue span{
	background-color: #34c2e3;
}
.orange span{
	background-color: #fecf23;
	background-image: linear-gradient(top, #fecf23, #fd9215);
}

.stripes span{
	background-size: 30px 30px;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);
	animation: stripesAnimate 1s linear infinite;
}
@keyframes stripesAnimate{
	0%{background-position:0 0;}
	100%{background-position: 60px 0;}
}
.stripes:hover span{
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);
}
 

深入閱讀：