太陽(yáng)系本身就是奇跡。我們每個(gè)人都在某種程度上試圖將太陽(yáng)系中的所有運(yùn)動(dòng)視為幾年光明的時(shí)光，盯著天體。但是你知道你甚至可以在電腦屏幕上畫(huà)出你的想像力嗎？在本教程中，我們將使用CSS3構(gòu)建一個(gè)由地球，月球和太陽(yáng)組成的簡(jiǎn)單太陽(yáng)系。
讓我們開(kāi)始編程
步驟： -
1）使用下面給出的HTML代碼來(lái)設(shè)計(jì)HTML結(jié)構(gòu)。
HTML（index.html）
<html>
<head>
<title>太陽(yáng)系</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è)計(jì)了這個(gè)框架。
讓我們?yōu)槲覀兊奶?yáng)能系統(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;
}
我們需要做的最后一件事是將動(dòng)畫(huà)添加到上述元素中。
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度，動(dòng)畫(huà)的每次迭代將對(duì)地球軌道進(jìn)行5秒，對(duì)于月球軌道將需要10秒，并且迭代計(jì)數(shù)將是無(wú)限的，以便一次又一次地繼續(xù)動(dòng)畫(huà)。
謝謝閱讀！
了解更多資訊請(qǐng)關(guān)注微信公眾號(hào)：芒果web 或者微信搜索（javascriptes6）
將您的查詢(xún)和反饋發(fā)送到我們的微信公眾號(hào)或在我們的QQ群634109637討論。您也可以在下面評(píng)論您的問(wèn)題。
另外，別忘了訂閱我們。
如果你喜歡這篇文章，那么請(qǐng)分享一下，幫助我們成長(zhǎng)。
