HTML炫酷太陽系是一種令人驚嘆的代碼。通過使用預先定義的HTML代碼，您可以創造一個炫酷的太陽系的效果。在這篇文章中，我們將向您展示如何使用HTML代碼來制作一個令人驚嘆的太陽系圖表。
<html>
<head>
<title>炫酷太陽系</title>
<style>
#sun {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: spin-sun 5s linear infinite;
}
#earth {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -100px;
width: 50px;
height: 50px;
border-radius: 50%;
background: blue;
animation: earth-orbit 10s linear infinite;
}
#moon {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -25px;
width: 25px;
height: 25px;
border-radius: 50%;
background: white;
animation: moon-orbit 3s linear infinite;
}
@keyframes spin-sun {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes earth-orbit {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
@keyframes moon-orbit {
from {
transform: rotate(0deg) translateX(50px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(50px) rotate(-360deg);
}
}
</style>
</head>
<body>
<div id="sun"></div>
<div id="earth"></div>
<div id="moon"></div>
</body>
</html>這段HTML代碼創建了三個div元素，用于表示太陽、地球和月亮。使用CSS樣式屬性將它們放在正確的位置，并定義它們的大小和形狀。然后，使用CSS動畫屬性使這些元素旋轉和移動，以模擬它們在太陽系中的行為。
要測試這段代碼，請復制并粘貼它到文本編輯器中，并將其保存為.html文件。打開文件，您將看到一個令人驚嘆的太陽系圖表！