HTML+CSS3绘制九大行星

最新推荐文章于 2022-09-29 09:26:19 发布

黄坏坏

最新推荐文章于 2022-09-29 09:26:19 发布

阅读量1.5k

点赞数 2

文章标签： css3 html css html5

本文链接：https://blog.csdn.net/huaihuai_huang/article/details/121932702

版权

本文介绍了如何使用HTML5和CSS3技术，不依赖任何JavaScript动态脚本，绘制出太阳系的九大行星。通过CSS实现行星的静态展示，并提供了一些优化建议，如使用JS动态变换行星阴影和将px单位替换以适应不同宽度的显示器。文章展示了最终的渲染效果。

摘要由CSDN通过智能技术生成

绘制太阳系时没有利用任何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: g