css3圈圈进度条

最新推荐文章于 2024-08-31 02:24:31 发布

weixin_30655219

最新推荐文章于 2024-08-31 02:24:31 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bestsamcn/p/5254288.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>多用户留言系统-</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
   .wrapper{
    width:120px;
    height:120px;
    position: absolute;
    left:0px;
    top:0px;
    background: #eee;
   }
   

   
   .circle{
    width:120px;
    height:120px;
    position: absolute;
    left:0px;
    top:0px;

   }
  
   .left-circle{
      clip: rect(0,60px,120px,0px);
   }
   .right-circle{
      clip: rect(0,120px,120px,60px);
   }
   .right{
    transform: rotate(-180deg);
    position: absolute;
    height:100px;
    width:100px;
    border-radius: 60px;
    border: 10px solid red;
    clip: rect(0,120px,120px,60px);
   }
   .left{
    height:100px;
    width:100px;
    transform: rotate(-180deg);
    position: absolute;
    border-radius: 60px;
    border: 10px solid green;
    clip: rect(0,60px,120px,0px);
   }
</style>
</head>
<body>
<div class="wrapper">
    <div class="circle right-circle">
      <div class="right" style="transform: rotate(-160deg);"></div>
    </div>
    <div class="circle left-circle">
      <div class="left" style="transform: rotate(-180deg);"></div>
    </div>
</div>
</body>
</html>

原理：

弄一个外部div包裹着，里面有两个二级div，都是只显示一般，左边的只显示左半部，右边的只显示右半部，二级div下都有一个作为旋转的div，他们也是只显示一般，但是和其父级div的方向刚好相反，然后通过旋转来显示出来，当第一个三级div旋转完之后，第二个三级div旋转，直至填满圈圈　　

转载于:https://www.cnblogs.com/bestsamcn/p/5254288.html