CSS3是一種強(qiáng)大的技術(shù)，我們可以使用它來實(shí)現(xiàn)許多酷炫的動(dòng)畫效果。其中一個(gè)有趣的效果是多個(gè)星球旋轉(zhuǎn)的動(dòng)畫效果。

.star {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
animation-name: orbit;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.star1 {
top: 100px;
left: 300px;
background-color: #EFEFEF;
animation-delay: 0s;
}
.star2 {
top: 200px;
left: 200px;
background-color: #FFBA08;
animation-delay: 1s;
}
.star3 {
top: 300px;
left: 100px;
background-color: #FFF;
animation-delay: 2s;
}
.star4 {
top: 200px;
left: 0px;
background-color: #87CEEB;
animation-delay: 3s;
}
@keyframes orbit {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}

在這段代碼中，我們創(chuàng)建了一個(gè)名為.star的類，它定義了每個(gè)星球的屬性，并使用了CSS3動(dòng)畫來讓它們圍繞一個(gè)公共點(diǎn)旋轉(zhuǎn)。

我們創(chuàng)建了四個(gè)不同的星球，每個(gè)星球的位置有所不同，并且使用了不同的背景顏色，這樣就可以創(chuàng)造出一個(gè)真實(shí)的星球系。

使用animation-delay屬性，我們可以讓每個(gè)星球在不同的時(shí)間開始旋轉(zhuǎn)，這樣可以讓整個(gè)動(dòng)畫更加逼真。

通過這段代碼，我們可以看到如何使用CSS3動(dòng)畫來創(chuàng)造一個(gè)非?？犰诺亩鄠€(gè)星球旋轉(zhuǎn)的效果，這對(duì)于任何喜歡制作動(dòng)畫的人來說都是非常有趣和有用的。