CSS3怎么制作圆环形进度条

这篇文章给大家介绍CSS3怎么制作圆环形进度条,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联是专业的龙城网站建设公司,龙城接单;提供成都网站设计、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行龙城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:

CSS Code复制内容到剪贴板

  1. .circleprogress{   
        width: 160px;   
        height: 160px;   
        border:20px solid red;   
        border-radius: 50%;   
    }

CSS3怎么制作圆环形进度条

然后就会说,这很简单嘛。但是如果不是完整圆形的呢?想了想:

CSS Code复制内容到剪贴板

  1. .circleprogress{   
      width: 160px;   
      height: 160px;   
      border:20px solid red;   
      border-left:20px solid transparent;   
      border-bottom:20px solid transparent;   
      border-radius: 50%;   
    }

CSS3怎么制作圆环形进度条

然后还是会说,这个也不难啦。可是,如果不是刚好都是45度的倍数呢?

OK,我们先设置一个200x200的方块,然后我们在这里面完成我们的效果:

CSS Code复制内容到剪贴板

  1. .circleProgress_wrapper{   
      width: 200px;   
      height: 200px;   
      margin: 50px auto;   
      position: relative;   
      border:1px solid #ddd;   
    }

CSS3怎么制作圆环形进度条

接下来我将在这个容器里再放两个矩形,每个矩形都占一半:

XML/HTML Code复制内容到剪贴板

  
          
            
           
                          
           
    

CSS Code复制内容到剪贴板

  1. .wrapper{   
      width: 100px;   
      height: 200px;   
      position: absolute;   
      top:0;   
      overflow: hidden;   
    }   
    .rightright{   
      rightright:0;   
    }   
    .left{   
      left:0;   
    }

CSS3怎么制作圆环形进度条

这里重点说一下.wrapper 的overflow:hidden; 起着关键性作用。这两个矩形都设置了溢出隐藏,那么当我们去旋转矩形里面的圆形的时候,溢出部分就被隐藏掉了,这样我们就可以达到我们想要的效果。

从html结构也已看到,在左右矩形里面还会各自有一个圆形,先讲一下右半圆:

CSS Code复制内容到剪贴板

  1. .circleProgress{   
      width: 160px;   
      height: 160px;   
      border:20px solid transparent;   
      border-radius: 50%;   
      position: absolute;   
      top:0;   
    }   
    .rightcircle{   
      border-top:20px solid green;   
      border-right:20px solid green;   
      rightright:0;   
    }

CSS3怎么制作圆环形进度条

可以看到,效果已经出来了,其实本来是一个半圆弧,但由于我们设置了上边框和右边框,所以上边框有一半溢出而被隐藏了,所以我们可以通过旋转得以还原:

CSS Code复制内容到剪贴板

  1. .circleProgress{   
      width: 160px;   
      height: 160px;   
      border:20px solid transparent;   
      border-radius: 50%;   
      position: absolute;   
      top:0;   
      -webkit-transform: rotate(45deg);   
    }

CSS3怎么制作圆环形进度条

所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现,变成一个全圆:

CSS Code复制内容到剪贴板

  1. .

  2. leftcircle{   
        border-bottom:20px solid green;   
        border-left:20px solid green;   
        left:0;   
    }

CSS3怎么制作圆环形进度条

紧接着,就是让它动起来,原理是这样的, 先让右半圆弧旋转180度,再让左半圆弧旋转180度 ,这样,两个半圆弧由于先后都全部溢出而消失了,所以看起来就是进度条再滚动的效果:

CSS Code复制内容到剪贴板

  1.   .rightcircle{   
      border-top:20px solid green;   
      border-right:20px solid green;   
      rightright:0;   
      -webkit-animation: circleProgressLoad_right 5s linear infinite;   
    }   
    .leftcircle{   
      border-bottom:20px solid green;   
      border-left:20px solid green;   
      left:0;   
      -webkit-animation: circleProgressLoad_left 5s linear infinite;   
    }   
    @-webkit-keyframes circleProgressLoad_right{   
      0%{   
        -webkit-transform: rotate(45deg);   
      }   
      50%,100%{   
        -webkit-transform: rotate(225deg);   
      }   
    }   
    @-webkit-keyframes circleProgressLoad_left{   
      0%,50%{   
        -webkit-transform: rotate(45deg);   
      }   
      100%{   
        -webkit-transform: rotate(225deg);   
      }   
    }

CSS3怎么制作圆环形进度条

当然,我们只需要调整一下角度就可以实现反向的效果:

CSS Code复制内容到剪贴板

    .circleProgress{   
  width: 160px;   
  height: 160px;   
  border:20px solid transparent;   
  border-radius: 50%;   
  position: absolute;   
  top:0;   
  -webkit-transform: rotate(-135deg);   
}   
@-webkit-keyframes circleProgressLoad_right{   
  0%{   
    -webkit-transform: rotate(-135deg);   
  }   
  50%,100%{   
    -webkit-transform: rotate(45deg);   
  }   
}   
@-webkit-keyframes circleProgressLoad_left{   
  0%,50%{   
    -webkit-transform: rotate(-135deg);   
  }   
  100%{   
    -webkit-transform: rotate(45deg);   
  }   
}

CSS3怎么制作圆环形进度条

好的,接下来就是奔向最终效果了,正如我们一开始看到的那样,有点像我们使用360卫士清理垃圾时的类似效果,当然不是很像啦:

CSS Code复制内容到剪贴板

  1.     .circleProgress_wrapper{   
      width: 200px;   
      height: 200px;   
      margin: 50px auto;   
      position: relative;   
      border:1px solid #ddd;   
    }   
    .wrapper{   
      width: 100px;   
      height: 200px;   
      position: absolute;   
      top:0;   
      overflow: hidden;   
    }   
    .rightright{   
      rightright:0;   
    }   
    .left{   
      left:0;   
    }   
    .circleProgress{   
      width: 160px;   
      height: 160px;   
      border:20px solid rgb(232, 232, 12);   
      border-radius: 50%;   
      position: absolute;   
      top:0;   
      -webkit-transform: rotate(45deg);   
    }   
    .rightcircle{   
      border-top:20px solid green;   
      border-right:20px solid green;   
      rightright:0;   
      -webkit-animation: circleProgressLoad_right 5s linear infinite;   
    }   
    .leftcircle{   
      border-bottom:20px solid green;   
      border-left:20px solid green;   
      left:0;   
      -webkit-animation: circleProgressLoad_left 5s linear infinite;   
    }   
    @-webkit-keyframes circleProgressLoad_right{   
      0%{   
        border-top:20px solid #ED1A1A;   
        border-right:20px solid #ED1A1A;   
        -webkit-transform: rotate(45deg);   
      }   
      50%{   
        border-top:20px solid rgb(232, 232, 12);   
        border-right:20px solid rgb(232, 232, 12);   
        border-left:20px solid rgb(81, 197, 81);   
        border-bottom:20px solid rgb(81, 197, 81);   
        -webkit-transform: rotate(225deg);   
      }   
      100%{   
        border-left:20px solid green;   
        border-bottom:20px solid green;   
        -webkit-transform: rotate(225deg);   
      }   
    }   
    @-webkit-keyframes circleProgressLoad_left{   
      0%{   
        border-bottom:20px solid #ED1A1A;   
        border-left:20px solid #ED1A1A;   
        -webkit-transform: rotate(45deg);   
      }   
      50%{   
        border-bottom:20px solid rgb(232, 232, 12);   
        border-left:20px solid rgb(232, 232, 12);   
        border-top:20px solid rgb(81, 197, 81);   
        border-right:20px solid rgb(81, 197, 81);   
        -webkit-transform: rotate(45deg);   
      }   
      100%{   
        border-top:20px solid green;   
        border-right:20px solid green;   
        border-bottom:20px solid green;   
        border-left:20px solid green;   
        -webkit-transform: rotate(225deg);   
      }   
    }

可以看到,其实就是多了一些改变不同边框颜色的动画而已,这个就给大家自己去实践吧! 主要还是利用两个矩形来完成这么一个圆形进度条效果,特别注意overflow这条规则,起着关键作用。

关于CSS3怎么制作圆环形进度条就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


文章标题:CSS3怎么制作圆环形进度条
本文地址:http://scyanting.com/article/gcsggj.html

其他资讯