<!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旋转，直至填满圈圈