HTML+CSS3绘制九大行星

绘制太阳系时没有利用任何JS等动态脚本，纯纯的使用H5+CSS3

当然，如果各位想要做出随着轨迹的移动行星的阴影也不断变换，那么可能就会用到JS来进行添加样式

如果想要在宽度不同的显示器上获得较好的展示，可以考虑把px换掉。

画布多说

看看效果图

CSS部分

body{
	margin: 0;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
}
.area{
	position: relative;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	background-color: black;
}
.sun{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 0;
	width: 8em;
	height: 8em;
	background-color: rgba(248, 107, 35);
	border-radius: 50%;
	box-shadow: 0px 0px 20px 5px rgba(248, 107, 35);
	transform: translate(-50%, -50%);
}
.orbit{
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border-radius: 50%;
	border-style: dotted;
	border-color: gray;
	borde