CSS3 动画：如何巧妙实现太阳系中行星的运动

前段时间，我看到一篇非常好的文章，介绍如何使用 CSS3 来实现太阳系中行星的运动。本小姐好奇地从头到尾读了一遍。我突然发现，好奇心不仅会杀死猫，还会增加知识（你是什么谬论！！可能有些朋友已经看过相关文章了，那么今天我们就来看看如何巧妙地使用 CSS3 来实现这么漂亮的动画吧！

我不知道你对 CSS3 动画了解多少，但我仍然局限于 CSS3 的东西以及要查找和使用的内容。CSS3 动画与转换的大小、旋转、位移和斜面相结合，可用于通过两行或三行代码创建许多有趣的效果。

我想分享这篇文章很久了，但你们都知道我有多懒。端午节前我自己写了 demo，但每次回家都和狗玩，根本没开电脑。你一定在想你没有救这个人......

废话不多说，我可能就不跟别人写了，我们按照我的想法给大家介绍一下这个动画吧。

1 动画实现的想法

在日常生活中写项目的时候，不管是大后台系统管理还是小宣传单，我都会先分析一下，然后再开始制作（PS：刚上班的时候，我写个项目快，从来没有看过整个需求，结果都是写出来的，所以磨刀切柴，我把我的痛苦经历给了初学者）。

我们一起来分析一下这个动画的思路。

查看图像，我们知道这是一个旋转动画，因此我们将使用 CSS3 transform（）。

所有行星的中心都围绕太阳旋转，默认是它们自己的重心，但这里我们需要全部是太阳 transform-origin（）。

这是最后一步，布局完成后，我们可以添加动画。

2 太阳系的 HTML

接下来，我们将讨论太阳系的产生，与上面的不同之处在于，行星围绕太阳旋转，而轮子围绕它们的圆心旋转，这意味着它们在不同的基地旋转。可以看出，变换的基点默认是行星的中心，所以我们需要改变行星 transform-origin 的中心点。太阳系的 html 结构如下：

类是 *-mercury-track 是行星的轨道

太阳位于 div 星系的中间，因此其他行星位于太阳的右侧一条直线上。将星系的宽度和高度设置为 1300 像素。太阳图像的大小为 100px*100px，因此太阳的左值和最高值均为（1300 – 100） / 2 = 600px，因此太阳位于中间。将 Mercury 设置为左侧 700px 和顶部 625px，以便将 Mercury 定位在太阳的右侧。然后设置 transform-origin：

transform-origin：-50px 25px;

transform-origin 的原点是动作元素左上角的位置，所以向左移动（700 – 1300 / 2） = 50px，向下移动 60 / 2 = 30px（60 是水星的高度），水星变换的基点成为太阳的中心，并以此为基础进行旋转

动画：旋转 2.4 秒线性无限;

@keyframes旋转{

到{

transform： rotate（1turn）;

其他行星也是这样设置的，计算起来有点麻烦。公转周期以地球的 10 年代为基础，其他周期按比例转换。这样，就可以画出太阳系自转的图，原理很简单，但效果非常好。

CSS3 动画：如何巧妙实现太阳系中行星的运动

相关推荐