css3圆形进度条

    前几天在网上看到了一个css3的进度条,自己想了下。做了一个。

 

         进度条由4层构成,最下面的一层表示初始状态,我用蓝色的圆形div表示,第二层到第四层用来做进度动画用,第二层的圆是由一个宽高都为0的div,加上border和圆角做出来的,初始状态的时候,border的颜色全都是透明,旋转45度。第三层是一个1/4圆,用来旋转用的,当这个圆开始旋转的时候,第二层的圆的border-top-color变成最终的颜色,我用的紫色,当这个圆转到90度的时候,第二层的圆的右边框变为紫色。由于有动画效果,在0%的时候右边框是透明的,25%的时候变成了紫色,中间有个颜色变化过程,这不是我要的,应该有的效果是25%的时候,右边框瞬间变成紫色,为了达到这个效果,可以在0%到24%之间的时候都是上边框的颜色为紫色,24%到25%之间的时间很短,看不出逐渐变颜色。

        还有一个问题就是1/4圆从旋转270度到360度的时候,在大圆的右边1/4圆的区域里面会出现小圆,实际效果是小圆从1/4的圆变小到没有,也就是扇形区域变小,为了解决这个问题就加入第四个圆,这个圆和小圆一样大,位置一样,就只有颜色不一样,颜色为紫色,这个圆刚开始隐藏,等小圆旋转到25%进度的时候显示,因为这个时候第二个圆的上边框已经出现,并且和第四个圆颜色一样,所以看不出第四个圆出现。

        最后一个问题就是当动画结束的时候,会一瞬间变回原来的颜色,我想要的效果是最后整个圆是紫色的,而不会变回蓝色,这个就设置一下各个动画的animation-fill-mode:forwards;让动画结束的时候的状态为动画结束的状态,而不是开始的状态。

 

代码如下,我设置的是无限次,把infinite改成数字可以换成对应的循环次数。代码是在jsbin上写的,css3的属性只写了webkit的前缀。http://jsbin.com/xovok/11/watch?html,css,output

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by wuxiandiejis (http://jsbin.com/xovok/7/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
body,div{margin:0;padding:0}
.outer{
width:0;
heigh:0;
border-radius:50%;
border:100px solid skyblue;
position:relative;
margin:50px auto;
}
.inner{
width:0;
height:0;
position:absolute;
top:-100px;
left:-100px;
border:100px solid transparent;
border-radius:50%;
-webkit-transform:rotate(45deg);
-webkit-animation:change_color 5s infinite linear forwards;
}
.rotate,.hide{
width:100px;
height:100px;
position:absolute;
top:-100px;
left:0;
border-top-right-radius:100px;
position:absolute;
top:-100px;
left:0;
}
.rotate{
background:skyblue;
background:skyblue;-webkit-transform-origin:0 100%;
-webkit-animation:move 5s infinite linear;
}
.hide{
background:purple;
visibility:hidden;
-webkit-animation:hide 5s infinite linear forwards;
}
/*旋转动画*/
@-webkit-keyframes move{
   0%{
       -webkit-transform:rotate(0deg);
   }
   100%{-webkit-transform:rotate(360deg);}
}
/*第二层变颜色*/
@-webkit-keyframes change_color{
   0%{
      border-color:purple transparent transparent transparent;
    }
24%{border-color:purple transparent transparent transparent}
   25%{
      border-color:purple purple transparent transparent;
    }
   49%{
      border-color:purple purple transparent transparent;
    }
   50%{border-color:purple purple purple transparent}
   74%{border-color:purple purple purple transparent}
    75%{
      border-color:purple;
    }
    100%{border-color:purple}
}
@-webkit-keyframes hide{
0%{visibility:hidden}
24%{visibility:hidden}
25%{visibility:visible}
100%{visibility:visible}
}

</style>
</head>
<body>
    <div class="outer">
      <div class="inner"></div>
      <div class="rotate"></div>
      <div class="hide"></div>
    </div>
</body>
</html>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。