用HTML+css制作太阳系

最新推荐文章于 2021-07-22 13:36:41 发布

weixin_45807783

最新推荐文章于 2021-07-22 13:36:41 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45807783/article/details/103102362

版权

大家想知道这个星系图如何制作吗
这是一个星系围着太阳转的动态星系图
代码如下

<html>
	<head>
		<meta charset="UTF-8">
		<title>太阳星星系</title>
		<style type="text/css">
		@keyframes rotate{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(-360deg);
				}
			}
			*{
				box-sizing: border-box;
			}
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
			}
			.solarsys{
				width: 80%;
				height: 100%;
				background-color:#000000;
				margin: 0 auto;
				position: relative;
			}
			.solarsys div{
				position: absolute;
				border-radius: 50%;
			}
			.sun{
				width: 150px;
				height: 150px;
				background:#f05121;
				box-shadow:1px 1px 20px #fbebbb;
				top: calc(50% - 75px);
				left: calc(50% - 75px);
			}
			.sun>img{
				width: 149px;
				height: 149px;
				border-radius: 50%;
			}
			.marsOrbit{
				width: 180px;
				height: 180px;
				border: 1px dashed #FA8008;
				top: calc(50% - 90px);
				left: calc(50% - 90px);
			}
			.mercury{
				width: 10px;
				height: 10px;
				background:dodgerblue;
				top: calc(50% - 5px);
				left: calc(50% - 95px);
				/*围绕圆心旋转*/
				transform-origin:95px 5px ;
				animation: rotate 0.8s linear infinite;
			}
			/*金星*/
			.venusOrbit{
				width: 240px;
				height: 240px;
				border: 1px dashed #ffffff;
				top: calc(50% - 120px);
				left: calc(50% - 120px);
			}
			.venus{
				width: 20px;
				height: 20px;
				background:yellow;
				top: calc(50% - 10px);
				left: calc(50% - 130px);
				/*围绕圆心旋转*/
				transform-origin:130px 10px ;
				animation: rotate 1.5s linear infinite;
			}
			/*地球*/
			.earthOrbit{
				width: 320px;
				height: 320px;
				border: 1px dashed #ffffff;
				top: calc(50% - 160px);
				left: calc(50% - 160px);
			}
			.earth{
				width: 15px;
				height: 15px;
				background:lightskyblue;
				top: calc(50% - 7px);
				left: calc(50% - 167px);
				/*围绕圆心旋转*/
				transform-origin:167px 7px ;
				animation: rotate 4.7s linear infinite;
			}
			/*火星*/
			.marsOrbit{
				width: 420px;
				height: 420px;
				border: 1px dashed #ffffff;
				top: calc(50% - 210px);
				left: calc(50% - 210px);
			}
			.mars{
				width: 12px;
				height: 12px;
				background:red;
				top: calc(50% - 5px);
				left: calc(50% - 215px);
				/*围绕圆心旋转*/
				transform-origin:215px 5px ;
				animation: rotate 5s linear infinite;
			}
			/*木星*/
			.jupiterOrbit{
				width: 520px;
				height: 520px;
				border: 1px dashed #ffffff;
				top: calc(50% - 260px);
				left: calc(50% - 260px);
			}
			.jupiter{
				width: 40px;
				height: 40px;
				background:green;
				top: calc(50% - 18px);
				left: calc(50% - 280px);
				/*围绕圆心旋转*/
				transform-origin:280px 18px ;
				animation: rotate 7s linear infinite;
			}
			/*土星*/
			.saturnOrbit{
				width: 580px;
				height: 580px;
				border: 1px dashed #ffffff;
				top: calc(50% - 290px);
				left: calc(50% - 290px);
			}
			.saturn{
				width: 30px;
				height: 30px;
				background:#ECCC7F;
				top: calc(50% - 10px);
				left: calc(50% - 305px);
				/*围绕圆心旋转*/
				transform-origin:305px 10px ;
				animation: rotate 4s linear infinite;
			}
			/*天王星*/
			.uranusOrbit{
				width: 620px;
				height: 620px;
				border: 1px dashed #ffffff;
				top: calc(50% - 310px);
				left: calc(50% - 310px);
			}
			.uranus{
				width: 22px;
				height: 22px;
				background:orange;
				top: calc(50% - 10px);
				left: calc(50% - 320px);
				/*围绕圆心旋转*/
				transform-origin:320px 10px ;
				animation: rotate 6s linear infinite;
			}
			/*海王星*/
			.neptuneOrbit{
				width: 660px;
				height: 660px;
				border: 1px dashed #ffffff;
				top: calc(50% - 330px);
				left: calc(50% - 330px);
			}
			.neptune{
				width: 18px;
				height: 18px;
				background:#EC7FE0;
				top: calc(50% - 10px);
				left: calc(50% - 340px);
				/*围绕圆心旋转*/
				transform-origin:340px 10px ;
				animation: rotate 10s linear infinite;
			}
		</style>
	</head>
<body>
		<div class="solarsys">
			<img src="img/20170521233836.jpg"/>
    <!--太阳-->
    <div class='sun'>
    	<img src="img/6.png (2).png"/>
    </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>
<!--
	transform-orign:X Y;
	绕圆圈旋转
	X 表示 轨道半径+球体半径
	Y 表示球体边境
	绕轴旋转
	left right center X周转
	top bottom center Y轴转
	
-->

全部代码如上所示

weixin_45807783

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
用HTML+css制作太阳系

大家想知道这个星系图如何制作吗代码如下<html> <head> <meta charset="UTF-8"> <title>太阳星星系</title> <style type="text/css"> @keyframes rotate{ from{ transform: rotate...
复制链接

扫一扫