达州做网站

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

CSS Code复制内容到剪贴板

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

这里重点说一下.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;   
   }

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

1. .

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

紧接着，就是让它动起来，原理是这样的， 先让右半圆弧旋转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);   
     }   
   }

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

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);   
  }   
}

好的，接下来就是奔向最终效果了，正如我们一开始看到的那样，有点像我们使用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怎么制作圆环形进度条就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都 达州



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：达州市南岸区弹子石腾龙大道58号2栋21-6

友情链接： 成都全网营销   成都全屋定制   成都机柜租用   网页设计   泸州叙永网站建设   广东帝美豪门窗   上市企业网站建设方案   广汉锦华橡塑   专业网站设计   眉山做网站   

版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14