HTML5太陽系源代碼是一段由HTML5編寫的代碼，它可以讓我們在網(wǎng)頁上呈現(xiàn)太陽系的行星運轉(zhuǎn)軌跡，為我們提供極佳的視覺體驗。
<html>
<head>
<title>太陽系</title>
<style>
body {
margin: 0;
padding: 0;
background: black;
}
#sun {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
border-radius: 50%;
background: radial-gradient(yellow, black);
box-shadow: 0 0 50px yellow;
}
.planet {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
box-shadow: 0 0 10px white;
animation-name: orbit;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#mercury {
width: 20px;
height: 20px;
margin-left: -80px;
margin-top: -10px;
animation-delay: 1.2s;
background: radial-gradient(#BEBEBE, black);
}
#venus {
width: 30px;
height: 30px;
margin-left: -110px;
margin-top: -15px;
animation-delay: 1.8s;
background: radial-gradient(white, black);
}
#earth {
width: 35px;
height: 35px;
margin-left: -155px;
margin-top: -17.5px;
animation-delay: 2.5s;
background: radial-gradient(blue, black);
}
#mars {
width: 25px;
height: 25px;
margin-left: -190px;
margin-top: -12.5px;
animation-delay: 3.3s;
background: radial-gradient(red, black);
}
@keyframes orbit {
from {
transform: rotate(0deg) translateX(0) translateY(0);
}
to {
transform: rotate(360deg) translateX(-100px) translateY(0);
}
}
</style>
</head>
<body>
<div id="sun"></div>
<div id="mercury" class="planet"></div>
<div id="venus" class="planet"></div>
<div id="earth" class="planet"></div>
<div id="mars" class="planet"></div>
</body>
</html>上面的代碼通過HTML5的樣式屬性和關(guān)鍵幀動畫屬性來實現(xiàn)行星圍繞太陽運轉(zhuǎn)的效果，代碼中的div標簽被設(shè)置為具有絕對定位，并通過動畫的方式繞sun標簽旋轉(zhuǎn)。
除此之外，太陽和行星的顏色和大小也被定義在代碼中，并通過radial-gradient實現(xiàn)了漸變的效果。