怎么完全用CSS3使一个的元素做流畅的弧线运动？

html-css010

怎么完全用CSS3使一个的元素做流畅的弧线运动？,第1张

可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。

border-radius是可以实现上下左右半圆的，但是如果在整圆里放下半圆，在圆里的位置不太好控制，按照上下左右一个一个介绍

看这样很容易就出啦上下半圆了

如果想在一个整圆中分别作出上下半圆不同颜色，而且圆中带字的话，如图：

恐怕上面的办法就不好使了，做这种双色圆的方法如下：

我用四个圆做对比，结果如下：

这种需求除了自己要做研究或者show一下做个demo外，还是js比较好。

css3的话，给该元素套个外层dom，外层transform:rotate，控制好半径（由外层dom大小控制）、角度、时间就行。