HTML+CSS绘制太阳系九大行星运行轨迹

最近正在菜鸟教程学习前端的相关知识，学习过程中发现这个项目比较有趣且知识涵盖比较多，所以就写篇博客记录一下，方便以后查看。这是我第一次写技术博客，如遇有缘人觉得写的不好的话，请指点。

首先先展示一下运行效果

代码部分

HTML代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>HTML+CSS绘制太阳系九大行星的运行轨迹</title><link rel="stylesheet" type="text/css" href="solarsys.css"/></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代码部分

/*太阳系*/
.solarsys
{width: 800px;height: 800px;;position: relative;margin: 0 auto;background-color: #000000;padding: 0;transform: scale(1);    /*缩放一倍*/
}/*太阳属性*/
.sun
{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);/*添加阴影*/position: absolute;  /*绝对定位*/margin: 0;
}/*水星属性*/
.mercury
{left:337.5px;top:395px;    /*left和top属性与transform-origin属性分别相加就是中心*/height: 10px;width: 10px;background-color: rgb(166,138,56);border-radius: 50%;position: absolute;transform-origin: 62.5px 5px; /*设置旋转元素的基点位置 太阳系的基点中心为太阳圆心 这里设置高和宽为800px 所以中心为400*/animation: rotate 1.5s infinite linear; /*元素动画 指定要绑定到选择器的关键帧名称 完成时间 播放次数（无限）如何完成周期*/
}/*水星轨道*/
.mercuryOrbit
{left:342.5px;top:342.5px;height: 115px;width: 115px;/*height和width取半径与left和top相加刚好等于400，所以行星才会和其相应的轨道相匹配*/background-color: transparent;    /*指定背景元素为透明*/border-radius: 50%;border-style: dashed;   /*轨道类型*/border-color: gray;position: absolute;border-width: 1px;margin: 0px;padding: 0px;
}/*金星属性*/
.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;
}/*金星轨道*/
.venusOrbit
{left:320px;top:320px;height: 160px;width: 160px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px;margin: 0px;padding: 0px;
}/*地球属性*/
.earth
{left:266.5px;top:391px;height: 18px;width: 18px;background-color: rgb(115,114,174);border-radius: 50%;position: absolute;transform-origin: 134px 9px;animation: rotate 6.25s infinite linear;
}/*地球轨道*/
.earthOrbit
{left:275px;top:275px;height: 250px;width: 250px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px;margin: 0px;padding: 0px;
}/*火星属性*/
.mars
{left:222.5px;top:392.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;
}/*火星轨道*/
.marsOrbit
{left:230px;top:230px;height: 340px;width: 340px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px;margin: 0px;padding: 0px;
}/*木星属性*/
.jupiter
{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;
}/*木星轨道*/
.jupiterOrbit
{left:155px;top:155px;height: 490px;width: 490px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px;margin: 0px;padding: 0px;
}/*土星属性*/
.saturn
{left:92px;top:387px;height: 26px;width: 26px;background-color: rgb(215,171,68);border-radius: 50%;position: absolute;transform-origin: 308px 13px;animation: rotate 183.92s infinite linear;
}/*土星轨道*/
.saturnOrbit
{left:105px;top:105px;height: 590px;width: 590px;background-color: transparent;border-radius: 50%;border-style: dashed;border-color: gray;position: absolute;border-width: 1px;margin: 0px;padding: 0px;
}/*天王星属性*/
.uranus
{left:41.5px;top:386.5px;height: 27px;width: 27px;background-color: rgb(164,192,206);border-radius: 50%;position: absolute;transform-origin: 358.5px 13.5px;animation: rotate 524.46s infinite linear;
}/*天王星轨道*/
.uranusOrbit
{left:55px;top:55px;height: 690px;width: 690px;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: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
{left:20px;top:20px;height: 760px;width: 760px;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);/*100%表示动画完成时*/}
}

到此，这个程序就完成啦！虽然比较简单，但css的知识还是比较多的，记录下来，方便以后查看。

HTML+CSS绘制太阳系九大行星运行轨迹相关推荐

HTML+CSS 绘制太阳系各个行星运行轨迹
模拟宇宙太阳系 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS 绘制太阳系各个行星运行轨迹
效果图原理行星沿着自身轨道旋转. 设置盒子,宽高均为800px,采用相对定位. 太阳绝对定位到盒子中间. 地球轨道盒子,宽高250px为圆形,背景色透明,加一个灰色边框,就是地球轨道, 绝对定位, ...
java 九大行星运行_html5 canvas太阳系九大行星运行动态图代码
特效描述:html5 canvas 太阳系九大行星运行动态图代码.html5 canvas这个动画加上了每个行星的名称,只要鼠标移入目标行星就会显示. 代码结构 1. HTML代码你浏览器不支持 ...
MATLAB 太阳系九大行星运行（天文物理）天体仿真（一）
MATLAB 太阳系九大行星运行仿真,代码如下(没有依据实际的速度,大小,和相对位置,请自行搜集资料和调整):(代码有问题请留言,代码来源百度知道并稍加修改) CODE BEGIN: clear;cl ...
java 九大行星运行_九大行星运行周期！
水星轨道长半径 5790万km 偏心率0.206 周期87.969日轨道加速度 0.3350383( 00 ) 0.1452248( 1800 ) 0.240127( 平均值 ) 金星轨道平均半 ...
天体运行轨迹_海王星轨道外发现139个新天体，能揭开太阳系第九颗行星奥秘？...
美国天体物理学家在距太阳最远的海王星轨道外发现139个新天体有助揭开太阳系第九颗行星奥秘 (神秘的地球uux.cn报道)据东网:自天文学家把冥王星降格为矮行星后,太阳系只余下八大行星.美国有天体物理 ...
HTML+CSS3绘制九大行星
绘制太阳系时没有利用任何JS等动态脚本,纯纯的使用H5+CSS3 当然,如果各位想要做出随着轨迹的移动行星的阴影也不断变换,那么可能就会用到JS来进行添加样式如果想要在宽度不同的显示器上获得较好的展 ...
Html+Css实现九大行星动画效果
前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转,折腾了好久弄出了个样子,但是最后客户改版了不需要了,好不容易弄出来的吊炸天的效果不能这么浪费了, 今年神舟十一号载人飞船顺利发射成功,中国航天 ...
python画球轨迹图_python绘制铅球的运行轨迹代码分享
我们按照面向过程程序设计的思想,使用python编写了程序,追踪铅球在运行过程中的位置信息.下面,修改程序代码,导入turtle模块,将铅球的运行轨迹绘制出来. python3代码如下: from m ...

HTML+CSS绘制太阳系九大行星运行轨迹

HTML+CSS绘制太阳系九大行星运行轨迹

首先先展示一下运行效果

代码部分

HTML代码

CSS代码部分

HTML+CSS绘制太阳系九大行星运行轨迹相关推荐

最新文章

热门文章