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

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

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

首先先展示一下运行效果

代码部分

HTML代码

	
		"UTF-8">
		
		"stylesheet" type="text/css" href="solarsys.css"/>
	
	
		
"solarsys">
  			
  			
'sun'>

  			
  			
'mercuryOrbit'>

  			
  			
'mercury'>

  			
  			
'venusOrbit'>

  			
  			
'venus'>

  			
  			
'earthOrbit'>

  			
  			
'earth'>

  			
  			
'marsOrbit'>

  			
  			
'mars'>

  			
  			
'jupiterOrbit'>

  			
  			
'jupiter'>

  			
  			
'saturnOrbit'>

  			
  			
'saturn'>

  			
  			
'uranusOrbit'>

  			
  			
'uranus'>

  			
  			
'neptuneOrbit'>

  			
  			
'neptune'>
		
	

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的知识还是比较多的，记录下来，方便以后查看。