css 绘制太阳系各大行星运行轨迹实例

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>css 绘制太阳系各大行星运行轨迹 实例 - 自学教程(runoops.com)</title>
	<style>
		.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);
			}
		}
	</style>
</head>

<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

</body>

</html>