利用CSS3实现进度条的两种姿势详解

时间:2017-04-08

效果图如下:


 


 

第一种姿势如下
 

先上代码

<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> ]?
  • angle:用角度值指定渐变的方向(或角度)。
  • to left:设置渐变为从右到左。相当于: 270deg
  • to right:设置渐变从左到右。相当于: 90deg
  • to top:设置渐变从下到上。相当于: 0deg
  • to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
  • 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,使得溢出的部分被遮盖了,之后的效果实现与这个属性关系也紧密相连。
 

如果没有设置该属性,效果就是这样的。
 


 

  • 共3页:
  • 上一篇1/3
  • 下一页
  • 上一篇:CSS清除浮动方法小结 下一篇:详解CSS五种方式实现Footer置底

    相关文章

    最新文章