Html
    Css
    Js

    
                        
.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;
	height:10px;
	width:10px;
	background-color:rgb(166,138,56);
	border-radius:50%;
	position:absolute;
	transform-origin:62.5px 5px;
	animation:rotate 1.5s infinite linear;
}
/*水星轨道*/
.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;
	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:100px;
	*/
  /*transform-origin:-75px -75px;
	*/
  /*animation:rotate 4s infinite linear;
	*/
  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:100px;
	*/
  /*transform-origin:-75px -75px;
	*/
  /*animation:rotate 4s infinite linear;
	*/
  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:100px;
	*/
  /*transform-origin:-75px -75px;
	*/
  /*animation:rotate 4s infinite linear;
	*/
  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:100px;
	*/
  /*transform-origin:-75px -75px;
	*/
  /*animation:rotate 4s infinite linear;
	*/
  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:100px;
	*/
  /*transform-origin:-75px -75px;
	*/
  /*animation:rotate 4s infinite linear;
	*/
  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:100px;
	*/
  /*transform-origin:-75px -75px;
	*/
  /*animation:rotate 4s infinite linear;
	*/
  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:100px;
	*/
  /*transform-origin:-75px -75px;
	*/
  /*animation:rotate 4s infinite linear;
	*/
  margin:0px;
	padding:0px;
}
@keyframes rotate {
	100% {
	transform:rotate(-360deg);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS绘制太阳系行星运行轨迹(原创)

更新时间:2020-12-20 00:04:12

0