效果图如下:
第一种姿势如下
先上代码
<div id="progress"> <span></span> </div>
/*对应CSS*/ #progress{ width: 300px; height: 30px; border:1px solid #ccc; border-radius: 15px; overflow: hidden; /*注意这里*/ box-shadow: 0 0 5px 0px #ddd inset; } #progress span { display: inline-block; width: 70%; height: 100%; background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%); background-size: 60px 30px; text-align: center; color:#fff; animation:load 3s ease-in; } @keyframes load{ 0%{ width: 0%; } 100%{ width:70%; } }
上方的渐变色使用了css3中的 linear-gradient
linear-gradient语法
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <length> | <percentage> ]?
栗子:
.test1{ background: linear-gradient(#EA2000, #E5A399); } .test2 { background: linear-gradient(45deg,#EA2000 20%,#E5632D 50%, #E5B12D 80%); } .test3 { background: linear-gradient(to top right, #000, #416796 50%, #B5CAE4); } .test4{ background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%); }
效果图:
动画通过keyframes来实现,通过改变span的宽度来实现进度的效果,素不素hin简单?!
现在的进度条效果是只有70%的效果,只要改变width的值就可以啦,就像下图,一致改成某个值即可。
第二种姿势
首先,构造好一个正方形的div,将这个正方形对称分成左右两块,如下
这里构造的是一个200px 200px的一个正方形,分成两块100px200px的矩形。
<div class="progress2"> <div class="rect right"> </div> <div class="rect left"> </div> </div>
.progress2{ width: 200px; height: 200px; margin: 100px auto; position: relative; border:1px solid #ddd; } .rect{ width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; /*注意这里*/ } .right{ right:0; } .left{ left:0; }
如下效果
接下来,在每一块矩形中再构造一个空心圆,先构造右半边,如下
<div class="progress2"> <div class="rect right"> <div class="circle rightcircle"></div> </div> <div class="rect left"> </div> </div>
.circle{ width: 160px; height: 160px; border:20px solid #ccc; border-radius: 50%; position: absolute; top:0; } .rightcircle{ border-top:20px solid rgb(41,137,216); border-right:20px solid rgb(41,137,216); right:0; }
会看到下面的效果
由于在class:rect中,将overflow设置成了hidden,使得溢出的部分被遮盖了,之后的效果实现与这个属性关系也紧密相连。
如果没有设置该属性,效果就是这样的。