太阳系本身就是奇迹。我们每个人都在某种程度上试图将太阳系中的所有运动视为几年光明的时光，盯着天体。但是你知道你甚至可以在电脑屏幕上画出你的想像力吗？在本教程中，我们将使用CSS3构建一个由地球，月球和太阳组成的简单太阳系。
让我们开始编程
步骤： -
1）使用下面给出的HTML代码来设计HTML结构。
HTML（index.html）
<html>
<head>
<title>太阳系</title>
</head>
<body>
<div id="system">
<div id="sun"></div>
<div id="rarth-orbit">
<div id="earth"></div>
<div id="moon-orbit">
<div id="moon"></div>
</div>
</div>
</div>
</body>
</html>
现在我们已经成功地设计了这个框架。
让我们为我们的太阳能系统添加一些颜色和吸引力。
2）在html结构中添加CSS文件并添加以下代码：
body{
background: white;
width:100%;
}
#system{
width:500px;
margin:auto;
background:black;
height:600px;
}
#sun{
margin-top:200px;
margin-left:150px;
position:absolute;
width:200px;
height:200px;
background:-webkit-linear-gradient(top, #e0872b 0%,#eace07 100%);
border-radius:50%;
}
#earth{
position:absolute;
margin-left:100px;
height:40px;
width:40px;
background:#eee;
border-radius:50%;
}
#earth-orbit{
position:absolute;
margin-top:100px;
margin-left:50px;
width:400px;
height:400px;
border:1px dotted white;
border-radius:100%;
-webkit-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
}
#moon{
width:10px;
height:10px;
border-radius:100%;
background:white;
position:absolute;
margin-left:70px;
}
#moon-orbit{
width:90px;
height:90px;
border-radius:100%;
border:1px dotted white;
margin-left:75px;
margin-top:-25px;
-webkit-animation:spin 5s linear infinite;
animation:spin 5s linear infinite;
}
我们需要做的最后一件事是将动画添加到上述元素中。
3）在CSS文件末尾添加以下代码：
@-webkit-keyframes spin{
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes spin{
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
上述代码将旋转地球轨道划分360度，动画的每次迭代将对地球轨道进行5秒，对于月球轨道将需要10秒，并且迭代计数将是无限的，以便一次又一次地继续动画。
谢谢阅读！
了解更多资讯请关注微信公众号：芒果web 或者微信搜索（javascriptes6）
将您的查询和反馈发送到我们的微信公众号或在我们的QQ群634109637讨论。您也可以在下面评论您的问题。
另外，别忘了订阅我们。
如果你喜欢这篇文章，那么请分享一下，帮助我们成长。
网友评论