CSS3实现圆形轨迹的动画

栏目: CSS · 发布时间: 5年前

内容简介:### CSS3实现圆形轨迹的动画#### 1. 前言最近有点懒,就不多说废话了,还是直接上示例吧

### 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轴的变化。

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

### 不总结了

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

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


以上所述就是小编给大家介绍的《CSS3实现圆形轨迹的动画》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从“为什么”开始

从“为什么”开始

[美] 西蒙·斯涅克 / 苏西 / 海天出版社 / 2011-7 / 32.00元

影响人类的行为:要么靠操纵,要么靠感召。 操纵带来的是交易,是短期效益; 感召带来的是信任,是永续经营! 盖茨走后,微软面临怎样的挑战?后盖茨时代,微软为何从一个希望改变世界的公司沦落为一个做软件的公司? 沃尔玛的灵魂人物过世后,一度被人们热爱的公司,遭到的竟然多是顾客、员工的反感?沃尔玛要怎样做才能重放昔日光彩? 星巴克吸引人们购买的不是咖啡,而是理念?为什么说霍华......一起来看看 《从“为什么”开始》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器