太阳系各大行星运行轨迹

2024-07-15 01:44| 来源: 网络整理| 查看: 265

利用CSS构造太阳系各大行星运行轨迹动画图网页

废话少说，直接上代码，然后再详细介绍构造过程。

代码利用CSS构造太阳系各大行星运行轨迹动画图网页 .solarsys{ width: 832px; height: 832px;; position: relative; margin: 0 auto; background-color: #000000; padding: 0; transform: scale(1); } /*太阳*/ .sun { left:383px; top:383px; height: 70px; width: 70px; background-color: rgb(248,107,35); border-radius: 50%; box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35); position: absolute; margin: 0; } /*水星*/ .mercury { left:351px; top:411px; height: 10px; width: 10px; background-color: rgb(166,138,56); border-radius: 50%; position: absolute; transform-origin: 65px 5px; animation: rotate 1.5s infinite linear; } /*水星轨道*/ .mercuryOrbit { left:356px; top:356px; height: 118px; width: 118px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*金星*/ .venus { left:321px; top:406px; height: 20px; width: 20px; background-color: rgb(246,157,97); border-radius: 50%; position: absolute; transform-origin: 95px 10px; animation: rotate 3.84s infinite linear; } /*金星轨道*/ .venusOrbit { left:331px; top:331px; height: 168px; width: 168px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*地球*/ .earth { left:282px; top:404px; height: 24px; width: 24px; background-color: rgb(115,114,174); border-radius: 50%; position: absolute; transform-origin: 134px 12px; animation: rotate 6.25s infinite linear; } /*地球轨道*/ .earthOrbit { left:294px; top:294px; height: 242px; width: 242px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*火星*/ .mars { left:256px; top:408px; height: 16px; width: 16px; background-color: rgb(140,119,63); border-radius: 50%; position: absolute; transform-origin: 160px 8px; animation: rotate 11.75s infinite linear; } /*火星轨道*/ .marsOrbit { left:264px; top:264px; height: 302px; width: 302px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*木星*/ .jupiter { left:176px; top:391px; height: 50px; width: 50px; background-color: rgb(156,164,143); border-radius: 50%; position: absolute; transform-origin: 240px 25px; animation: rotate 72.04s infinite linear; } /*木星轨道*/ .jupiterOrbit { left:201px; top:201px; height: 428px; width: 428px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*土星*/ .saturn { left:106px; top:396px; height: 40px; width: 40px; background-color: rgb(215,171,68); border-radius: 50%; position: absolute; transform-origin: 310px 20px; animation: rotate 183.92s infinite linear; } /*土星轨道*/ .saturnOrbit { left:126px; top:126px; height: 578px; width: 578px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*天王星*/ .uranus { left:56px; top:401px; height: 30px; width: 30px; background-color: rgb(164,192,206); border-radius: 50%; position: absolute; transform-origin: 360px 15px; animation: rotate 524.46s infinite linear; } /*天王星轨道*/ .uranusOrbit { left:71px; top:71px; height: 688px; width: 688px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*海王星*/ .neptune { left:10px; top:403px; height: 26px; width: 26px; background-color: rgb(133,136,180); border-radius: 50%; position: absolute; transform-origin: 406px 13px; animation: rotate 1028.76s infinite linear; } /*海王星轨道*/ .neptuneOrbit { left:23px; top:23px; height: 784px; width: 784px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } @keyframes rotate { 100% { transform: rotate(-360deg); } }

在这里插入图片描述

构造过程 step1:声明代码利用CSS构造太阳系各大行星运行轨迹动画图网页声明设置完成，然后可以直接向里面添加东西了。 step2:构造思路

首先我们应该有一个大致的思路，构造各个行星，需要知道这些行星都是右方形实行块利用border-radius转化成圆形，我们首先应该确定各个行星的直径，以及位置分布。我们查阅资料知道各个行星的大小比例以及对应的位置。详细资料见太阳系八大行星详细资料和八大行星排列顺序。在这里插入图片描述然后我们就确定各个行星的直径，并且确定他们之间的间隔，见下图我们将太阳，水星，金星，地球，火星，木星，土星，天王星和海王星的直径分别设置为90px,10px,20px,24px,16px,50px,40px,30px,26px。以及他们之间的间隔分别为10,10,15,10,30,30,20,20,10。则我们就可以知道整个背景的宽度和高度均为832px。我们的整个背景以及各个行星的运行轨迹都是设置成正方形形状，便于可以转化为圆形轨迹。

则太阳系背景对应的css代码为： CSS代码 .solarsys{ width: 832px; height: 832px;; position: relative; margin: 0 auto; background-color: #000000; padding: 0; transform: scale(1); }

接下来我们从外向内开始构造。

step3:构造海王星

我们从上一步中知道海王星的直径26px,并且海王星距离最左侧有10px的距离，则我们可以知道海王星的最上角坐标为：

left：10px top:H / 2 - d / 2 = (H - d) / 2 =(832 - 26) / 2 =403px

我们构造的海王星的高度和宽度均为26px,然后利用

border-radius: 50%;

将其转化成圆形。其中的transform-origin参数是为了行星环绕的效果，第二个参数为圆对应的半径，即：13px,第一个参数计算公式为：top-left+r=403-10+13=406px。

CSS代码 /*海王星*/ .neptune { left:10px; top:403px; height: 26px; width: 26px; background-color: rgb(133,136,180); border-radius: 50%; position: absolute; transform-origin: 406px 13px; }

在这里插入图片描述

step4:构造海王星运行轨迹

海王星的运行轨迹应该为圆形的虚线表示，则我们可以通过构造正方形，然后将其转化为圆形。那我们就需要知道该方形的边长以及左上角的位置坐标，而且左上角的坐标left与top应该相同。方形虚线的运行轨迹应该经过对应圆的圆形，则我们就可以知道该轨迹对应的left应该为对应圆到左侧的距离，即left=10+13=23px。然后我们确定该方形的边长，我们已经知道了该方形的左上角的坐标，则我们就可以直接得到该方形的边长为(L / 2 - left)*2 = (416 - 23) *2= 786,然后我们再减去外边框的值，即最终的结果为786 - 1 * 2 = 784。

CSS代码 /*海王星轨道*/ .neptuneOrbit { left:23px; top:23px; height: 784px; width: 784px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; }

在这里插入图片描述

step5:构造天王星

我们直接求海王星最上角坐标：

left：上一个的left + 上一个行星的直径 + 两个行星之间的距离即：10 + 26 + 20 = 56 top:H / 2 - d / 2 = (H - d) / 2 =(832 - 30) / 2 =401px

其他的和构造海王星一致。

CSS代码 /*天王星*/ .uranus { left:56px; top:401px; height: 30px; width: 30px; background-color: rgb(164,192,206); border-radius: 50%; position: absolute; transform-origin: 360px 15px; }

在这里插入图片描述

step6:构造天王星轨迹

构造过程与构造海王星轨迹一致。

CSS代码 /*天王星轨道*/ .uranusOrbit { left:71px; top:71px; height: 688px; width: 688px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; }

在这里插入图片描述

step7:构造其他行星和运行轨迹

构造过程与上面两个例子一致，不再进行赘述。在这里插入图片描述

step7:构造太阳

构造过程与构造海王星和天王星一致，只不过需要注意box-shadow属性，则构造的方形边长应该对应地减少，为90-（5 + 5 + 10） = 70px。

CSS代码 /*太阳*/ .sun { left:383px; top:383px; height: 70px; width: 70px; background-color: rgb(248,107,35); border-radius: 50%; box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35); position: absolute; margin: 0; }

在这里插入图片描述至此基本的图形已经构造完成，然后我们只需要在下一步构造旋转动画效果，就完成了最终的任务。

step8:构造动画效果

我们构造逆时针旋转效果。代码如下：

CSS代码 @keyframes rotate { 100% { transform: rotate(-360deg); } }

通过设置时间来控制各个行星的运行速度，即：

CSS代码 animation: rotate ts infinite linear;

设置一直旋转。至此所有的步骤都已完成。在这里插入图片描述

【本文地址】

太阳系各大行星运行轨迹

太阳系各大行星运行轨迹

今日新闻

推荐新闻