CSS3实现圆形轨迹的动画

### CSS3实现圆形轨迹的动画

#### 1. 前言
最近有点懒,就不多说废话了,还是直接上示例吧

#### 2. CSS3 transfrom 与 transition实现圆形旋转
自从CSS3在移动端兼容性好了之后,CSS实现的动画也越来越多。

先看一个例子:

开新页查看:[DEMO](/study/2019/20190113/index-1.html);

这里主要是两套旋转,外层自动旋转,内层为了内部在旋转的任意位置,都能正常,也在进行旋转。

#### 3. transfrom 与 transition实现类似圆形进度条
transform与transition的实现,再配合:overflow与width:50%,即可实现;

毕竟本篇也不是用于讲原理的,就直接上示例了,毕竟对于程序员来说,还是代码来的实在:

实例一:
先化几个固定角度的圆:

开新页查看:[固定角度的圆DEMO](/study/2019/20190113/index-2.html);

接下来,如果是静态的,以上面的解决思路,就完全可以实现了,那如果他我想要把上面的形状动起来呢?

依然很简单,看如下的,只需要再配合transition就可以了。

示例:

开新页查看:[会动的固定角度的圆DEMO](/study/2019/20190113/index-3.html);

注意,这里呢,有一个限制,就是动画的缓动效果,最完美的是`linear`,只有这个效果,才是完全流畅的,不可以是`ease-in-out`这样的效果,因为这是两个元素的动画,连在一起实现的;

> 如果要求不高的话,也可以使用:`ease-in-out`, `ease-in`, `ease-out`来做这个缓动;当`180`之下,只需要一个元素的时候,就使用`ease-in-out`,当两个元素,都需要动的时候,前者使用`ease-in`,后者使用`ease-out`;但是因为前后转的角度不同,可能导致前后动画的快慢不一致。

#### CSS3 贝塞尔曲线与animation
强大贝塞尔曲线:

示例:

开新页查看:[贝塞尔曲线圆形轨迹DEMO](/study/2019/20190113/index-4.html);

> 这种方法有个限制,就是无法使用transform来实现动画,因为同一个元素,不能分别在X轴和Y轴,同时使用transform,而transform只设置了X,Y轴的变化。

这个方法不好,使用起来比较麻烦,建议还是使用前面的两种;

### 不总结了
这里就是几个基本的方法,没有花时间,去找更多的实现,先放在这里了,以后慢慢补。

内容会持续更新,也欢迎提出新的实现方案;

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>