Question

css3多个进度条 progressbar 怎么定义

Answer 1

　　1.效果分析
　　纯CSS3实现进度条的制作，效果如下图所示，详见----demo----
　　2.难点分析
　　圆角边框，内阴影，
　　渐变填充实现斜纹效果
　　斜纹动画
　　3.实现步骤
　　a.html架构
　　<div class="progressBar blue stripes">
　　<span></span>
　　</div>
　　<div class="progressBar orange stripes">
　　<span></span>
　　</div>
　　b.进度条母条.progressBar的实现
　　.progressBar{
　　margin: 50px auto;
　　padding: 5px;
　　width: 360px;
　　height: 20px;
　　background-color: #1a1a1a;
　　border-radius: 4px;
　　box-shadow: 0 1px 5px #000 inset;
　　}
　　c.进度条字条span的实现
　　.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;
　　}
　　d.不同颜色的变化
　　.blue span{
　　background-color: #34c2e3;
　　}
　　.orange span{
　　background-color: #fecf23;
　　background-image: linear-gradient(top, #fecf23, #fd9215);
　　}
　　e.斜条纹实现
　　.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);
　　}