CSS 绘制太阳系各个行星运行轨迹

效果图

原理

行星沿着自身轨道旋转。

设置盒子，宽高均为800px，采用相对定位。
太阳绝对定位到盒子中间。
地球轨道盒子，宽高250px为圆形，背景色透明，加一个灰色边框，就是地球轨道，
绝对定位，left=400px-250px/2=275px，top=400px-250px/2=275px。
地球设置为圆形宽高18px，绝对定位，要想地球在轨道上，
left值就等于轨道的left值减去半径在加上边框半径的一半。275+0.5-9=266.5px
top值等于400px-9px=391px。
旋转中心为transform-origin: 134px 9px;X轴为400-left值，y轴为400-半径。
动画设置为逆时针旋转360deg，动画执行时间为依次递增。从内圈到外圈。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.solarsys {width: 800px;height: 800px;position: relative;margin: 0 auto;background-color: #000;transform: scale(1);}/*太阳*/.sun {position: absolute;left: 357px;top: 357px;height: 90px;width: 90px;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);}/*水星轨道*/.mercuryOrbit {left: 342.5px;top: 342.5px;height: 115px;width: 115px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px;}/* 水星 */.mercury {position: absolute;left: 337.5px;top: 395px;height: 10px;width: 10px;background-color: rgb(166, 138, 56);border-radius: 50%;transform-origin: 62.5px 5px;animation: rotate 1.5s infinite linear;}/* 金星轨道 */.venusOrbit {left: 320px;top: 320px;height: 160px;width: 160px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;}/* 金星 */.venus {left: 309px;top: 389px;height: 22px;width: 22px;background-color: rgb(246, 157, 97);border-radius: 50%;position: absolute;transform-origin: 91px 11px;animation: rotate 3.84s infinite linear;}/* 地球轨道 */.earthOrbit {position: absolute;left: 275px;top: 275px;width: 250px;height: 250px;background-color: transparent;border: 1px solid gray;border-radius: 50%;}/* 地球 */.earth {left: 266.5px;top: 391px;height: 18px;width: 18px;background-color: rgb(115, 114, 174);border-radius: 50%;position: absolute;transform-origin: 133.5px 9px;animation: rotate 6.25s infinite linear;}/* 火星轨道 */.marsOrbit {position: absolute;left: 230px;top: 230px;height: 340px;width: 340px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;border-width: 1px;}/* 火星 */.mars {position: absolute;left: 222.5px;top: 397.5px;height: 15px;width: 15px;background-color: rgb(140, 119, 63);border-radius: 50%;position: absolute;transform-origin: 177.5px 7.5px;animation: rotate 11.75s infinite linear;}/* 木星轨道 */.jupiterOrbit {position: absolute;left: 155px;top: 155px;height: 490px;width: 490px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;border-width: 1px;}/* 木星 */.jupiter {position: absolute;left: 134px;top: 379px;height: 42px;width: 42px;background-color: rgb(156, 164, 143);border-radius: 50%;position: absolute;transform-origin: 266px 21px;animation: rotate 74.04s infinite linear;}/* 土星轨道 */.saturnOrbit {position: absolute;left: 105px;top: 105px;width: 590px;height: 590px;border-radius: 50%;background-color: transparent;border: 1px dashed gray;}/* 土星 */.saturn {position: absolute;height: 26px;width: 26px;left: 92px;top: 387px;border-radius: 50%;background-color: rgb(215, 171, 68);transform-origin: 308px 13px;animation: rotate 183.92s infinite linear;}/* 天王星天王星轨道 */.uranusOrbit {position: absolute;top: 55px;left: 55px;width: 690px;height: 690px;border-radius: 50%;background-color: transparent;border: 1px dashed gray;}/* 天王星 */.uranus {position: absolute;width: 27px;height: 27px;left: 41.5px;top: 386.5px;background-color: rgb(164, 192, 206);border-radius: 50%;transform-origin: 358.5px 13.5px;animation: rotate 524.46s infinite linear;}/*海王星*/.neptune {left: 10px;top: 390px;height: 20px;width: 20px;background-color: rgb(133, 136, 180);border-radius: 50%;position: absolute;transform-origin: 390px 10px;animation: rotate 1028.76s infinite linear;}/*海王星轨道*/.neptuneOrbit {position: absolute;left: 20px;top: 20px;height: 760px;width: 760px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;border-width: 1px;}@keyframes rotate {100% {transform: rotate(-360deg);}}</style>
</head><body><div class="solarsys"><!--太阳--><div class='sun'></div><!--水星轨道--><div class='mercuryOrbit'></div><!--水星--><div class='mercury'></div><!--金星轨道--><div class='venusOrbit'></div><!--金星--><div class='venus'></div><!--地球轨道--><div class='earthOrbit'></div><!--地球--><div class='earth'></div><!--火星轨道--><div class='marsOrbit'></div><!--火星--><div class='mars'></div><!--木星轨道--><div class='jupiterOrbit'></div><!--木星--><div class='jupiter'></div><!--土星轨道--><div class='saturnOrbit'></div><!--土星--><div class='saturn'></div><!--天王星轨道--><div class='uranusOrbit'></div><!--天王星--><div class='uranus'></div><!--海王星轨道--><div class='neptuneOrbit'></div><!--海王星--><div class='neptune'></div></div>
</body></html>

CSS 绘制太阳系各个行星运行轨迹相关推荐

HTML+CSS 绘制太阳系各个行星运行轨迹
模拟宇宙太阳系 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
HTML+CSS绘制太阳系九大行星运行轨迹
HTML+CSS绘制太阳系九大行星运行轨迹最近正在菜鸟教程学习前端的相关知识,学习过程中发现这个项目比较有趣且知识涵盖比较多,所以就写篇博客记录一下,方便以后查看.这是我第一次写技术博客,如遇有缘人 ...
HTML5 canvas绘制太阳系各行星(包括月球的公转)
HTML5 canvas绘制太阳系看了好多canvas绘制太阳系行星,他们都忽略了月亮,虽然月亮不是行星,但是绘图少了月亮也就没有挑战性了,今天我就计算了一下月亮的轨迹,然后按照公转的比例画了上 ...
太阳系行星运行轨道图，C语言，源代码分享
[精选]太阳系八大行星运转轨迹程序,C语言,源代码分享目录 [精选]太阳系八大行星运转轨迹程序,C语言,源代码分享程序展示一.项目环境简单介绍一下easyx图形库 Easyx图形库二.运行效 ...
天体运行轨迹_海王星轨道外发现139个新天体，能揭开太阳系第九颗行星奥秘？...
美国天体物理学家在距太阳最远的海王星轨道外发现139个新天体有助揭开太阳系第九颗行星奥秘 (神秘的地球uux.cn报道)据东网:自天文学家把冥王星降格为矮行星后,太阳系只余下八大行星.美国有天体物理 ...
js制作的炫酷3D太阳系行星运行效果
想象着打开网页就能浏览太阳系行星的运行情况,促进我们更好的了解这个宇宙星空,于是找到了这样一段代码可以完美的实现这个功能,通过css和js就可以实现在网页上展示一个完美的太阳系行星的运行情况,效果炫酷 ...
天体运行轨迹_太阳系内天体的运行轨迹是什么？开普勒为什么这么伟大？
哥白尼的日心说在近代科学发展史上具有重大的革命意义.但由于受到历史条件的限制,这一理论也存在着不可避免的缺点和错误.臂如说,哥白尼认为行星运动的轨道是圆形的,因为轨道应当是"完美的" ...
python画球轨迹图_python绘制铅球的运行轨迹代码分享
我们按照面向过程程序设计的思想,使用python编写了程序,追踪铅球在运行过程中的位置信息.下面,修改程序代码,导入turtle模块,将铅球的运行轨迹绘制出来. python3代码如下: from m ...
android实现带纹理的运动轨迹,基于SceneForm实现子弹射击（绘制子弹运行轨迹）...
基于 SceneForm 实现的子弹射击(绘制子弹运行轨迹) Sceneform 框架很强大,不了解 Sceneform 的时候,觉得要想做 3D 场景需要会 OpenGL,而 OpenGL 的学习曲 ...

CSS 绘制太阳系各个行星运行轨迹

效果图

原理

CSS 绘制太阳系各个行星运行轨迹相关推荐

最新文章

热门文章