CSS旋轉(zhuǎn)加載動(dòng)畫是一種常用的UI設(shè)計(jì)風(fēng)格，它可以讓頁面更加生動(dòng)有趣。在下面的例子中，我們將展示如何通過CSS實(shí)現(xiàn)一個(gè)基于旋轉(zhuǎn)的加載中動(dòng)畫。

.loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
}
.loader:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
border: 10px solid rgba(0, 0, 0, 0.1);
border-top-color: #3498db;
animation: loader 1s infinite linear;
}
@keyframes loader {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

首先，我們需要?jiǎng)?chuàng)建一個(gè)顯示加載中的容器，并將其居中顯示。為了實(shí)現(xiàn)這一點(diǎn)，我們使用了position、top、left、transform等屬性。

然后，我們使用:before偽類創(chuàng)建一個(gè)圓形的元素，并將其設(shè)置在容器中央。同時(shí)，我們?cè)O(shè)置了圓形的尺寸、邊框、邊框顏色以及旋轉(zhuǎn)動(dòng)畫。

最后，我們使用@keyframes定義旋轉(zhuǎn)動(dòng)畫的過渡狀態(tài)，從0度到360度之間無限循環(huán)旋轉(zhuǎn)。

總之，通過上述代碼，我們可以輕松地實(shí)現(xiàn)一個(gè)基于旋轉(zhuǎn)的加載中動(dòng)畫。在實(shí)際應(yīng)用中，您可以根據(jù)自己的需求進(jìn)行樣式、尺寸等方面的調(diào)整，以及結(jié)合JavaScript實(shí)現(xiàn)更加復(fù)雜的交互效果。