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

本文参考自：

http://jingyan.baidu.com/article/c910274be4dd69cd371d2d48.html

这里只是做下原理解释

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

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

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

代码：

 

这样可以绘制0-360任意角度的扇形了。

然后，我们要绘制一个会动的扇形，比如这个缺口一开一合，向贪吃蛇一样。

css3提供了animation属性，本文只考虑chrome,因此只加了-webkit-animation,需要兼容的同学另行处理。

1.解开上面两个css中注释掉的部分：-webkit-animation

然后增加如下css

/**动画*/
@-webkit-keyframes an1{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(90deg);}
       100%{transform: rotate(0deg);}
}


@-webkit-keyframes an2{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(-90deg);}
       100%{transform: rotate(0deg);}
}

这样让A半圆在2秒内从0旋转到90在旋转到0

让B半圆在2秒内从0旋转到-90在旋转到0

刚好完成一次开闭的动作。

ps:

上面的半圆是通过clip产生的，假设我的场景是这个扇形的位置是变化的，比如贪吃蛇的场景，那么使用clip就不合适了。

下面采取另外一种方法

 

 

 
 

效果可以看到，一个会动的圆形在往右边一动，缺口一开一合.