CSS 旋度圓形是一種常用的 CSS 技術(shù)，它可以讓一個(gè)元素繞中心點(diǎn)旋轉(zhuǎn)。這個(gè)技術(shù)常常在制作 loading 效果或用于強(qiáng)調(diào)頁(yè)面元素時(shí)使用。下面我們將介紹如何使用 CSS 制作旋度圓形。

// CSS 代碼
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid #fff;
border-top-color: #FF8C00;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 添加動(dòng)畫(huà)
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

首先，我們需要一個(gè)正方形的元素，使用 CSS 設(shè)置其寬度和高度為 100px，設(shè)置其圓角半徑為 50%。考慮到旋度時(shí)需要知道固定的中心點(diǎn)，我們將該元素的定位方式設(shè)為 absolute 并將 top 和 left 設(shè)置為 50%。同時(shí)，使用 translate(-50%, -50%) 將其移至頁(yè)面中央。

為了將元素旋轉(zhuǎn)起來(lái)，我們需要為該元素添加一個(gè)動(dòng)畫(huà)。使用 @keyframes 創(chuàng)建一個(gè)名為 spin 的動(dòng)畫(huà)，設(shè)定其從 0 到 360 度旋轉(zhuǎn)。最后，將這個(gè)動(dòng)畫(huà)應(yīng)用到元素上，設(shè)定時(shí)長(zhǎng)為 2s，速度為 linear，并設(shè)置重復(fù)無(wú)限次。

在這個(gè)基礎(chǔ)上，我們可以進(jìn)行更多的樣式設(shè)計(jì)，比如可以在旋轉(zhuǎn)邊緣添加特別顏色邊框等。同時(shí)也可以根據(jù)實(shí)際需求設(shè)置其大小以及動(dòng)畫(huà)時(shí)間等參數(shù)。