Jquery 创建1/2圆运动效果

（请原谅拙劣的绘图尝试）

“饼图”和“切片”都是用css制作的，我想做的是让它们按照特定的顺序从左到右“滑动”，从圆圈（div.circle）开始，比如说3秒钟，完成后，红色，然后绿色

希望有人能理解我想说的话

<div class="graph">
    <div class="circle"></div>
    <div class="pie-green"></div>
    <div class="pie-red"></div>
</div>


div.graph div.circle {
    position: absolute;
    left: 20%;
    top: 34%;
    width: 300px;
    height: 150px;
    background-color: #eee;
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
    border: 2px solid gray;
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 20px 15px 30px -20px rgba(0,0,0,1);
    -moz-box-shadow: 20px 15px 30px -20px rgba(0,0,0,1);
    box-shadow: 20px 15px 30px -20px rgba(0,0,0,1);
}
div.graph div.pie-green {
    position: absolute;
    top: 20%;
    left: 24%;
    -webkit-transform: rotate(14deg); 
    -moz-transform: rotate(14deg); 
    width: 0;
    height: 0;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-top: 200px solid #65A059;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    opacity: 0.96;
    filter: alpha(opacity=96);
    z-index: 100;
}
div.graph div.pie-red {
    position: absolute;
    top: 50%;
    left: 40%;
    -webkit-transform: rotate(70deg); 
    -moz-transform: rotate(70deg);  
    width: 0;
    height: 0;
    border-left: 76px solid transparent;
    border-right: 76px solid transparent;
    border-top: 155px solid #C1100E;
    -moz-border-radius: 42%;
    -webkit-border-radius: 42%;
    border-radius: 42%;
}

等分图等分圆{
位置：绝对位置；
左：20%；
最高：34%；
宽度：300px；
高度：150像素；
背景色：#eee；
边框左上半径：150px；
边框右上角半径：150px；
边框：2倍纯色灰色；
边界底部：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
-网络工具包盒阴影：20px 15px 30px-20px rgba（0,0,0,1）；
-moz盒阴影：20px 15px 30px-20px rgba（0,0,0,1）；
盒影：20px 15px 30px-20px rgba（0,0,0,1）；
}
div.graph div.pie-green{
位置：绝对位置；
最高：20%；
左：24%；
-webkit变换：旋转（14度）；
-moz变换：旋转（14度）；
宽度：0；
身高：0；
左边框：140px实心透明；
右边框：140px实心透明；
边框顶部：200px实心#65A059；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
不透明度：0.96；
过滤器：α（不透明度=96）；
z指数：100；
}
div.graph div.pie-red{
位置：绝对位置；
最高：50%；
左：40%；
-webkit变换：旋转（70度）；
-moz变换：旋转（70度）；
宽度：0；
身高：0；
左边框：76px实心透明；
右边框：76px实心透明；
边框顶部：155px实心#C1100E；
-moz边界半径：42%；
-webkit边界半径：42%；
边界半径：42%；
}

我建议使用SVG。使用CSS几乎不可能实现您想要的

我尝试使用更改

transform:rotation（）

值，但这还不够。饼图围绕自己的轴旋转，因此还需要更改

left

和

top

属性

---

即使这样，结果也不令人满意。签出（单击以开始动画）。

这是SVG图像吗？对不起，我应该提到，我正在尝试使这种“滑动效果”仅在div.graph在页面上可见时发生，因为它位于页面的末尾，直到用户向下滚动才能看到。对不起，这既不能回答我的问题，也不清楚。不是，这只是div和css，可能会稍微难一点。你试过

D3.js

或什么吗？我明白你的意思。您知道从哪里开始学习SVG的好教程吗？