css3运动后留下轨迹尾巴_巧妙利用CSS3实现太阳系行星公转运动轨迹

巧妙利用CSS3实现太阳系行星公转运动轨迹

前段时间在博客园看到一篇很不错的文章，就是介绍如何用CSS3来实现太阳系中行星的运动。本小姐处于好奇心从头到完整的看完了。突然发现好奇不仅仅害死猫，也可以增长知识嘛(你这是什么谬论！！！)。也许有的朋友看过有关的文章那么今天我们就一起来看看怎么巧妙的利用CSS3 来实现这么漂亮的动画的吧！

我不清楚大家对于CSS3的动画了解多少，但是我对于 CSS3的东西还是限制与用什么查什么的阶段。css3的animation动画，结合transform的大小、旋转、位移、斜切，通过两三行代码，便可做出很多有趣的效果。

看不到动态图的请点击以下图片应该就可以看到了

这篇文章我很早就想分享出来了，但是你们都知道我那么懒，(懒癌晚期了已经)。在端午节之前我就自己写好了demo，但是每次回家都玩狗，压根不去开电脑。你们肯定在想没救了这人……

废话不扯了，我和别人的写法可能不一样，下面按照我的思路给大家介绍这个动画吧。

第一、动画实现的思路

在日常写项目的时候不管是大到后台的系统管理，还是小到一个宣传的单页，我都会先拿来分析一下再去着手制作(PS: 刚上班的时候有项目来就赶紧写，从来不把整个需求看完，结果就是全部从写，所以磨刀不误砍柴工，把我的惨痛经验送给初学者们)。

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

看图片我们知道这个是一个旋转动画所以我们会用到

所有行星旋转围绕的中心都是太阳，而默认的都是自己的重心但是这里我们需要都是太阳(这个是重点)

@keyframes rotation这个就是最后一步，当布局完成我们就可以加上动画了

第二、太阳系的HTML

接下来讨论太阳系的制作，跟上面不同的地方是行星是围绕着太阳转的，而轮子是围绕着自己的圆心转的，也就是说他们转的基点不同。可以看出，transform的基点默认是本身的中心center，所以我们要改变行星的进行转换的中心点transform-origin。太阳系的html结构如下：

class为 *-mercury-track 是行星的运行轨道

太阳位于div galaxy的中间，让其它行星位于太阳的右边排成一条线。设置galaxy的width和height都为1300px。sun图片的大小为100px*100px，所以sun的left值和top值都为(1300 – 100) / 2 = 600px，这样sun就位于中间位置。设置水星mercury的left值为700px，top为625px，这样水星就位于太阳偏右的位置。然后再设置transform-origin:

transform-origin: -50px 25px;

transform-origin的原点是作用的元素左上角位置，所以往左移(700 – 1300 / 2) = 50px，往下移60 / 2 = 30px(60为水星高度)，水星转换的基点就变成了太阳的中心，在此基础上进行旋转：

animation: rotation 2.4s linear infinite;

@keyframes rotation{

to{

transform: rotate(1turn);

}

其它的行星，也按照这种方法进行设置，计算稍微繁琐。公转的周期以地球10s为基准，其它按比例换算。这样就可以做出一个太阳系公转的图，原理很简单，效果却很好.

本文分享部分摘自：博客园

需要源码的小伙伴请点击下面的下载。有疑问的请给我留言。

css3运动后留下轨迹尾巴_巧妙利用CSS3实现太阳系行星公转运动轨迹相关推荐

css3运动后留下轨迹尾巴_球磨机的工作原理及机内运动轨迹分析
球磨机被广泛用于矿山.建筑材料.耐火材料.玻璃陶瓷等行业作为磨粉作业的主要设备.那么球磨机的工作原理及运动轨迹你都了解么?下面小编带你深入了解其原理及运动轨迹. 一.球磨机工作原理球磨机的主要部分& ...
css3运动后留下轨迹尾巴_机器人轨迹规划简介
轨迹规划,往往称为机器人轨迹规划,属于低层规划,基本上不涉及工人智能问题,而是在机械手运动学和动力学的基础上,讨论在关节空间和笛卡儿空间中机器人运动的轨迹规划和轨迹生成方法.所谓轨迹,是指机械手在运动 ...
css3运动后留下轨迹尾巴_利用CSS+JS实现唯美星空轨迹运动效果
先给大家分享效果图: 给大家分享一个使用CSS+JS实现的唯美星空轨迹运动效果, 这样的效果不输给Flash .相关代码如下: cloth body { background: #000; } i ...
css3运动后留下轨迹尾巴_CSS3 甩尾巴（摆尾）动效
CSS 语言: CSSSCSS 确定 html, body { min-height: 100%; } body { background-image: url('data:image/svg+xml ...
巧妙利用CSS3实现太阳系行星公转运动轨迹
前段时间在博客园看到一篇很不错的文章,就是介绍如何用CSS3来实现太阳系中行星的运动.本×××处于好奇心从头到完整的看完了.突然发现好奇不仅仅害死猫,也可以增长知识嘛(你这是什么谬论!!!).也许有的 ...
使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
python画车辆轨迹图_如何利用 Python 绘制酷炫的车辆轨迹 — 速度时空图？三维数据用二维图像呈现...
说明:本文系交通攻城狮原创文章,如需转载请私信联系,侵权必究. 2020,第 30 期,编程笔记建议直接阅读精编版:如何利用 Python 绘制酷炫的车辆轨迹 - 速度时空图?三维数据用二维图像呈 ...
行星轨迹制作_探知宇宙！八大行星手工制作，和孩子一起探索宇宙奥秘，宝宝妈收！（附教程）...
纸艺网呆萌手工集中营本文为纸艺网原创编辑整理,转载请后台留言图源 | 网络视频元素 | Youtube 宇宙浩瀚无垠对人类来说充满了神秘和好奇很多的科学家一生都致力于探索宇宙作为祖国的小 ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...

css3运动后留下轨迹尾巴_巧妙利用CSS3实现太阳系行星公转运动轨迹

css3运动后留下轨迹尾巴_巧妙利用CSS3实现太阳系行星公转运动轨迹相关推荐

最新文章

热门文章