css3动画等待进度条原理（如何用纯CSS3制作进度条）

本文目录

• 如何用纯CSS3制作进度条
• css3多个进度条 progressbar 怎么定义
• 如何利用CSS3实现圆形进度条

如何用纯CSS3制作进度条

条纹进度条
若要制作一个条纹进度条，我们应该把.bar-fill重新命名为.bar-fill-stripes。我们将使用backgrou-image属性里的 linear-gradient同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：
.bar-fill-stripes {
height:15px;
display:block;
background:#e74c3c;
width:0;
border-radius:8px;
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}

css3多个进度条 progressbar 怎么定义

　　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);
　　}

如何利用CSS3实现圆形进度条

html部分：
《pre class="brush:html;toolbar: true; auto-links: false;"》《div class="div1"》 《div class="right-div2"》 《div class="right-div3"》《/div》 《/div》 《div class="left-div2"》 《div class="left-div3"》《/div》 《/div》 《/div》 《div class="div4"》《span》0《/span》%《/div》《/pre》
最内层的div3裁剪一半然后旋转需要的角度， 父级div2裁剪一半，此时已经裁剪出来了那个扇形了 最后在上面加个圆形遮盖层
css代码：
《pre class="brush:css;toolbar: true; auto-links: false;"》.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;} .div1 { background:#ccc; position:relative;} .right-div2, .right-div3, .left-div2, .left-div3 { position:absolute; left:0; top:0;} .right-div2, .right-div3 { clip:rect(0,auto,auto,100px);} .left-div2, .left-div3 { clip:rect(0,100px,auto,auto);} .right-div3 { background:#f00; transform:rotate(-180deg);} .left-div3 { background:#f00; transform:rotate(-180deg);} .div4 { position:absolute; top:25px; left:25px; width:150px; height:150px; line-height:150px; text-align:center; border-radius:50%; background:#fff;}《/pre》
js代码：
《pre class="brush:js;toolbar: true; auto-links: false;"》$(function(){ var a = 0; var b = 0; var timer = setInterval(function(){ a++; if(a《=50){ //-180deg是0%，转换一下 b = a*3.6-180; $(’.right-div3’).css(’transform’,’rotate(’ + b + ’deg)’); }else if(a》50&&a《=100){ //超过50%，需要修改左边的,右边0deg是50% $(’.right-div3’).css(’transform’,’rotate(0)’); //左边0deg是100%，转换一下 b = a*3.6-360; $(’.left-div3’).css(’transform’,’rotate(’ + b + ’deg)’); }else{ clearInterval(timer); return; } $(’.div4 span’).html(a); },200); });《/pre》