如何使用css3绘制任意角度扇形+动画

 

 

这里只是做下原理解释

原理：使用两个半圆做角度拼接。

比如想绘制一个缺口朝右，缺口弧度30度角的扇形

那么将由一个旋转65度角的半圆A+一个旋转-65度角的半圆B组合而成。

代码：

<style>
.outer{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(65deg);
clip: rect(0px,100px,200px,0px);/* 这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
border-radius: 100px;
background-color: yellow;
/*-webkit-animation: an1 2s infinite linear;*/
}


.pie{
    position: absolute;
width: 200px;
height: 200px;
transform: rotate(-65deg);
clip: rect(0px,100px,200px,0px);
border-radius: 100px;
background-color: yellow;
/*-webkit-animation: an2 2s infinite linear;*/
}

</style>

<div