css太陽系動畫是一種非常炫酷的動畫效果，在網(wǎng)頁設(shè)計中經(jīng)常被使用。通過css的transform屬性，可以輕松地制作出類似于太陽系一樣的動畫效果。

.sun {
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
animation: rotate 5s linear infinite;
}
.mercury {
width: 20px;
height: 20px;
background-color: gray;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -75px;
margin-top: -10px;
animation: orbit 2s linear infinite;
}
.venus {
width: 30px;
height: 30px;
background-color: orange;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -15px;
animation: orbit 4s linear infinite;
}
.earth {
width: 35px;
height: 35px;
background-color: blue;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -135px;
margin-top: -17.5px;
animation: orbit 6s linear infinite;
}
.animation-box {
position: relative;
width: 400px;
height: 400px;
background-color: black;
border-radius: 50%;
}
@keyframes orbit {
0% {
transform: rotate(0deg) translateX(90px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(90px) rotate(-360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

在上面的代碼中，.sun是太陽的樣式，.mercury、.venus、.earth分別是水星、金星、地球的樣式。animation屬性用于制定動畫的名稱、持續(xù)時間、動畫效果和次數(shù)。

在@keyframes里，我們利用transform屬性的rotate()和translateX()來制作飛行和旋轉(zhuǎn)的動畫效果。關(guān)鍵幀從0%到100%分別表示動畫開始和結(jié)束時的狀態(tài)。

最后，我們在.animation-box里放置了這些行星和太陽的元素，使它們相互調(diào)和，形成一個完整的太陽系。