创建1/2圆圈运动效果

Question

（请原谅绘画的不良尝试）

＆＃34;馅饼＆＃34;和＆＃34;切片＆＃34;只是用css制作，我想做的就是让它们＆＃34;刷入＆＃34;按照特定的顺序从左到右，从圆圈（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%;
}

Answer 1

我建议使用SVG。使用CSS几乎不可能完成你想要的任务。

我尝试使用keyframes来更改left值，但这还不够。饼图围绕它自己的轴旋转，因此还需要更改top和{{1}}属性。

即使这样，结果也不尽如人意。查看the fiddle（点击开始动画）。