标签：style blog http color os io ar for 2014
进度条由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>
标签：style blog http color os io ar for 2014
原文地址：http://www.cnblogs.com/wuxiandiejia/p/3959837.html
