地球绕太阳公转轨道的运动地球绕太阳公转轨道有公转运动吗有运动轨道吗

来源：蜘蛛抓取(WebSpider) 时间：2017-03-13 04:44 标签： 太阳的公转运动
你的位置： >
> 巧妙利用CSS3实现太阳系行星公转运动轨迹
巧妙利用CSS3实现太阳系行星公转运动轨迹
前段时间在博客园看到一篇很不错的文章，就是介绍如何用CSS3来实现太阳系中行星的运动。本小姐处于好奇心从头到完整的看完了。突然发现好奇不仅仅害死猫，也可以增长知识嘛（你这是什么谬论！！！）。也许有的朋友看过有关的文章那么今天我们就一起来看看怎么巧妙的利用CSS3 来实现这么漂亮的动画的吧！
我不清楚大家对于CSS3的动画了解多少，但是我对于 CSS3的东西还是限制与用什么查什么的阶段。css3的animation动画，结合transform的大小、旋转、位移、斜切，通过两三行代码，便可做出很多有趣的效果。
看不到动态图的请点击以下图片应该就可以看到了
这篇文章我很早就想分享出来了，但是你们都知道我那么懒，（懒癌晚期了已经）。 在端午节之前我就自己写好了demo，但是每次回家都玩狗，压根不去开电脑。你们肯定在想没救了这人……
废话不扯了，我和别人的写法可能不一样，下面按照我的思路给大家介绍这个动画吧。
第一、动画实现的思路
在日常写项目的时候不管是大到后台的系统管理，还是小到一个宣传的单页，我都会先拿来分析一下再去着手制作（PS: 刚上班的时候有项目来就赶紧写，从来不把整个需求看完，结果就是全部从写，所以磨刀不误砍柴工，把我的惨痛经验送给初学者们）。
下面我们一起来分析一下这个动画的思路
看图片我们知道这个是一个旋转动画所以我们会用到
所有行星旋转围绕的中心都是太阳，而默认的都是自己的重心但是这里我们需要都是太阳
(这个是重点)
@keyframes rotation 这个就是最后一步，当布局完成我们就可以加上动画了
第二、太阳系的HTML
接下来讨论太阳系的制作，跟上面不同的地方是行星是围绕着太阳转的，而轮子是围绕着自己的圆心转的，也就是说他们转的基点不同。可以看出，transform的基点默认是本身的中心center，所以我们要改变行星的进行转换的中心点transform-origin。太阳系的html结构如下：
class为 *-mercury-track 是行星的运行轨道
&div class="galaxy"&
&div class='sun'&&/div&
&div class='mercury-track'&&/div&
&div class='mercury'&&/div&
&div class='venus-track'&&/div&
&div class='venus'&&/div&
&div class='earth-track'&&/div&
&div class='earth'&&/div&
&div class='mars-track'&&/div&
&div class='mars'&&/div&
&div class='jupiter-track'&&/div&
&div class='jupiter'&&/div&
&div class='saturn-track'&&/div&
&div class='saturn'&&/div&
&div class='uranus-track'&&/div&
&div class='uranus'&&/div&
&div class='pluto-track'&&/div&
&div class='pluto'&&/div&
太阳位于div galaxy的中间，让其它行星位于太阳的右边排成一条线。设置galaxy的width和height都为1300px。sun图片的大小为100px*100px，所以sun的left值和top值都为(1300 &#) / 2 = 600px，这样sun就位于中间位置。设置水星mercury的left值为700px，top为625px，这样水星就位于太阳偏右的位置。然后再设置transform-origin:
transform-origin: -50px 25
transform-origin的原点是作用的元素左上角位置，所以往左移（700 &# / 2) = 50px，往下移60 / 2 = 30px(60为水星高度)，水星转换的基点就变成了太阳的中心，在此基础上进行旋转：
animation: rotation 2.4
@keyframes rotation{
transform: rotate(1turn);
其它的行星，也按照这种方法进行设置，计算稍微繁琐。公转的周期以地球10s为基准，其它按比例换算。这样就可以做出一个太阳系公转的图，原理很简单，效果却很好.
本文分享部分摘自：
需要源码的小伙伴请点击下面的下载。有疑问的请给我留言。
下载地址：文件名称：巧妙利用CSS3实现太阳系行星公转运动轨迹文件大小：见文件适用版本：PC更新日期：作者信息：小月博客 转载请注明： & 赏一点心意×
您也可以使用第三方帐号快捷登录
订单信息（价格单位：积分）
*商品名称：
*商品单价：
*商品数量：
收货信息商店（虚拟商品除邮箱外可不填）
收货姓名：
收货地址：
收货邮编：
用户邮箱：
电话号码：
手机号码：
留言备注：
总金额：1.00 积分扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
下载作业帮安装包
扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
关于行星绕太阳的运动，下列说法中正确的是（　　）A. 所有行星都在同一椭圆轨道上绕太阳运动B. 行星绕太阳运动时太阳位于行星轨道的中心处C. 离太阳越近的行星公转周期越小D. 离太阳越近的行星公转周期越大
扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
A、开普勒第一定律可得，所有行星都绕太阳做椭圆运动，且太阳处在所有椭圆的一个焦点上．故A错误；B、开普勒第一定律可得，行星绕太阳运动时，太阳位于行星轨道的一个焦点处，故B错误；C、由公式3T2=k，得离太阳越近的行星的运动周期越短，故C正确；D、开普勒第三定律可得，所以行星轨道半长轴的三次方跟公转周期的二次方的比值都相等，故D错误；故选：C
为您推荐：
其他类似问题
开普勒第一定律是太阳系中的所有行星围绕太阳运动的轨道都是椭圆，太阳处在所有椭圆的一个焦点上．在相等时间内，太阳和运动着的行星的连线所扫过的面积都是相等的．开普勒第三定律中的公式3T2=k，可知半长轴的三次方与公转周期的二次方成正比．
本题考点：
开普勒定律．
考点点评：
行星绕太阳虽然是椭圆运动，但我们可以当作圆来处理，同时值得注意是周期是公转周期．
C.离太阳越近的行星公转周期越小
cA.你可以想一下地球和金星就不在同一轨道嘛B.太阳处于行星椭圆轨道的一个焦点（开普勒定律）D.根据万有引力定律算一下GmM/R^2=mR4∏^2/T^2
扫描下载二维码关于行星绕太阳运动的下列说法中正确的是()A．所有行星都在同一椭圆轨道上绕太阳运动B．行星绕太阳运动时太阳位于行星轨道的中心处C．离太阳越近的行星的运动周期越长D．所有行星轨道半长轴的三次方跟公转周期的二次方的比值都相等D解析：所有行星绕太阳运动的轨道都是椭圆，但不是同一轨道，太阳处在椭圆的一个焦点上，故A、B错；所有行星的轨道半长轴的三次方跟公转周期的二次方的比值都相等，离太阳越近的行星其运动周期越短。故C错，D对。2014年春高中物理6.1《行星的运动》课时练6新人教版必修2答案
解析：所有行星绕太阳运动的轨道都是椭圆，但不是同一轨道，太阳处在椭圆的一个焦点上，故A、B错；所有行星的轨道半长轴的三次方跟公转周期的二次方的比值都相等，离太阳越近的行星其运动周期越短。故C错，D对。相关试题

我要回帖

更多关于 太阳的公转运动 的文章

 

随机推荐