太陽系本身就是奇跡苔货。我們每個人都在某種程度上試圖將太陽系中的所有運動視為幾年光明的時光提揍，盯著天體目养。但是你知道你甚至可以在電腦屏幕上畫出你的想像力嗎救军？在本教程中财异，我們將使用CSS3構(gòu)建一個由地球，月球和太陽組成的簡單太陽系唱遭。
讓我們開始編程
步驟： -
1）使用下面給出的HTML代碼來設(shè)計HTML結(jié)構(gòu)戳寸。
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>
現(xiàn)在我們已經(jīng)成功地設(shè)計了這個框架。
讓我們?yōu)槲覀兊奶柲芟到y(tǒng)添加一些顏色和吸引力拷泽。
2）在html結(jié)構(gòu)中添加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);
}
上述代碼將旋轉(zhuǎn)地球軌道劃分360度，動畫的每次迭代將對地球軌道進行5秒司致，對于月球軌道將需要10秒拆吆，并且迭代計數(shù)將是無限的，以便一次又一次地繼續(xù)動畫脂矫。
謝謝閱讀枣耀！
了解更多資訊請關(guān)注微信公眾號：芒果web 或者微信搜索（javascriptes6）
將您的查詢和反饋發(fā)送到我們的微信公眾號或在我們的QQ群634109637討論。您也可以在下面評論您的問題庭再。
另外捞奕，別忘了訂閱我們牺堰。
如果你喜歡這篇文章，那么請分享一下颅围，幫助我們成長萌焰。
