css+html 制作太阳星系

css+html 太阳星系

有助于新手学习css动画

<div class="solarsys">
			<h3>太阳星系</h3>
			<!--太阳-->
			<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>

		<style type="text/css">
		body{
			background-color: #000000;
		}
		.solarsys h3{
			color: #FAFAFA;
			text-align: center;
			
		}
		/* 太阳 */
		.sun{
			background: linear-gradient(#fcd670,#f2784b);
			border-radius: 100%;
			width: 85px;
			height: 85px;
			position: absolute;
			top: calc(50% - 80px);
			left: calc(50% - 45.2px);
			margin: 0;
			/* 动画 */
			transition: 0.3s;
			transition-property: all;   /*应用过渡效果的 CSS*/
			transition-duration: 0.3s; /*过渡效果持续*/
			transition-timing-function: ease; /*以相同的速度从开始到结束的过渡效果：*/
			transition-delay: 0s; /*过渡效果开始前等待：*/
		}
	
		/* 行星动画 */
		@keyframes rotate {
			100% {
				transform: rotate(-360deg);
			}
		}
		/* 水星 */
		.mercury{
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: #fafafa;
			position: absolute;
			top: calc(50% - 74px);
			left: calc(50% - 74px);
			transform-origin: 70px 42px;
			animation: rotate 1.5s infinite linear;
		}
		/* 水星轨道 */
		.mercuryOrbit{
			width: 150px;
			height: 150px;
			border-radius: 50%;
			border: dashed #808080 1px;
			margin: 0;
			padding: 0;
			position: absolute;
			top: calc(50% - 110px);
			left: calc(50% - 80px);
		}
		/* 金星 */
		.venus{
			width: 15px;
			height: 15px;
			position: absolute;
			background-color: rgb(246,157,97);
			border-radius: 50%;
			transform-origin: 117px 30px;
			animation: rotate 3.84s infinite linear;
			left: calc(50% - 120px);
			top: calc(50% - 65px);
		}
		/* 金星轨道 */
		.venusOrbit{
			width: 220px;
			height: 220px;
			background-color: transparent;
			border-radius: 50%;
			border: dashed gray 1px;
			position: absolute;
			margin: 0;
			padding: 0;
			 left: calc(50% - 115px);
			top: calc(50% - 145px);
		}
		/* 地球轨道 */
		.earthOrbit{
			height: 300px;
			width: 300px;
			background-color: transparent;
			border-radius: 50%;
			border: dashed gray 1px;
			margin: 0;
			padding: 0;
			left: 251px;
			position: absolute;
			left: calc(50% - 155px);
			top: calc(50% - 185px);
		}
		/* 地球 */
		.earth{
			width: 16px;
			height: 16px;
			background-color: rgb(115,114,174);
			border-radius: 50%;
			position: absolute;
			transform-origin: 130px 96px;
			animation: rotate 6.25s infinite linear;
			left: calc(50% - 133px);
			top: calc(50% - 130px);
		}
		/* 火星轨道 */
		.marsOrbit{
			height: 380px;
			width: 380px;
			background-color: transparent;
			border-radius: 50%;
			position: absolute;
			border: dashed gray 1px;
			margin: 0;
			padding: 0;
			top: calc(50% - 225px);
			left: calc(50% - 195px);
		}
		/* 火星 */
		.mars{
			width: 15px;
			height: 15px;
			background-color: rgb(140,119,63);
			border-radius: 50%;
			position: absolute;
			transform-origin: 197px 12px;
			animation: rotate 11.75s infinite linear;
			top: calc(50% - 45px);
			left: calc(50% - 200px);
		}
		/* 木星轨道 */
		.jupiterOrbit{
			width: 490px;
			height: 490px;
			background-color: transparent;
			border-radius: 50%;
			border: dashed gray 1px;
			margin: 0;
			padding: 0;
			position: absolute;
			top: calc(50% - 280px);
			left: calc(50% - 250px);
		}
		/* 木星 */
		.jupiter{
			width: 38px;
			height: 38px;
			background-color: rgb(156,164,143);
			border-radius: 50%;
			position: absolute;
			left:308px;
			top: 414px;
			transform-origin: 266px 21px;
			top: calc(50% - 60px);
			left: calc(50% - 270px);
			animation: rotate 74.04s infinite linear;
		}
		/* 土星轨道 */
		.saturnOrbit{
			width: 590px;
			height: 590px;
			background-color: transparent;
			border-radius: 50%;
			border: dashed gray 1px;
			margin: 0;
			padding: 0;
			position: absolute;
			top: calc(50% - 330px);
			left: calc(50% - 300px);
		}
		/* 土星*/
		.saturn{
			width: 42px;
			height: 42px;
			background: linear-gradient(#8d6e63, #ffe0b2);
			border-radius: 50%;
			position: absolute;
			transform-origin: 315px 18px;
			animation: rotate 200.92s infinite linear;
			top: calc(50% - 60px);
			left: calc(50% - 320px);
		}
		/* 天王星轨道 */
		.uranusOrbit{
			height: 690px;
			width: 690px;
			background-color: transparent;
			border-radius: 50%;
			border: dashed gray 1px;
			margin: 0;
			padding: 0;
			position: absolute;
			top: calc(50% - 380px);
			left: calc(50% - 353px);
		}
		/* 天王星*/
		.uranus{
			height: 40px;
			width: 40px;
			background-color: rgb(164,192,206);
			border-radius: 50%;
			position: absolute;
			transform-origin: 366px 9px;
			animation: rotate 370s infinite linear;
			top: calc(50% - 45px);
			left: calc(50% - 370px);
		}
		/* 海王星轨道 */
		.neptuneOrbit{
			width: 780px;
			height: 780px;
			background-color: transparent;
			border-radius: 50%;
			border: dashed gray 1px;
			margin: 0;
			padding: 0;
			position: absolute;
			top: calc(50% - 420px);
			left: calc(50% - 400px);
		}
		/* 海王星 */
		.neptune{
			height: 35px;
			width: 35px;
			background-color: rgb(133,136,180);
			border-radius: 50%;
			position: absolute;
			transform-origin: 409px 18px;
			animation: rotate 500s infinite linear;
			top: calc(50% - 50px);
			left: calc(50% - 420px);
		}
		</style>