CSS小球旋轉(zhuǎn)loading動(dòng)畫(huà)是一種常用的網(wǎng)頁(yè)加載動(dòng)效，它通過(guò)CSS樣式的設(shè)置，實(shí)現(xiàn)了多個(gè)小球圍繞中心軸旋轉(zhuǎn)的效果。

.loading {
position: relative;
width: 64px;
height: 64px;
}
.loading:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
border-radius: 50%;
border: 3px solid #fff;
border-bottom-color: transparent;
animation: spin 1s ease-in-out infinite;
}
.loading:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
border-radius: 50%;
border: 3px solid #fff;
border-bottom-color: transparent;
transform: rotate(30deg);
animation: spin 1s ease-in-out 0.1s infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

首先，我們需要?jiǎng)?chuàng)建一個(gè)包裹元素，用來(lái)設(shè)置loading的整體大小和位置。這里使用了一個(gè)class名為loading的div元素。在這個(gè)div元素后，使用了偽元素:after和:before分別創(chuàng)建兩個(gè)圓形小球。其中，border-radius為50%來(lái)實(shí)現(xiàn)圓形，border來(lái)設(shè)置小球的邊框顏色和寬度。

在樣式設(shè)置完成后，我們使用了CSS的@keyframes規(guī)則來(lái)定義小球旋轉(zhuǎn)的動(dòng)畫(huà)效果。通過(guò)transform:rotate()來(lái)設(shè)置小球的旋轉(zhuǎn)角度。在loading:after的樣式中，我們直接定義了動(dòng)畫(huà)的名稱(chēng)和執(zhí)行時(shí)間，并使用infinite來(lái)設(shè)定無(wú)限循環(huán)動(dòng)畫(huà)。而在loading:before中，由于要實(shí)現(xiàn)兩個(gè)小球同時(shí)旋轉(zhuǎn)的效果，所以為其設(shè)置了0.1s的延遲開(kāi)始時(shí)間，并且使用了不同的transform:rotate()來(lái)讓他們旋轉(zhuǎn)方向出現(xiàn)偏差。

這樣就完成了整個(gè)loading動(dòng)畫(huà)效果的設(shè)計(jì)，它可以使用在您的網(wǎng)站、頁(yè)面等地方，帶給用戶(hù)更好的體驗(yàn)和互動(dòng)性。