CSS 旋度圓形是一種常用的 CSS 技術(shù)，它可以讓一個元素繞中心點(diǎn)旋轉(zhuǎn)。這個技術(shù)常常在制作 loading 效果或用于強(qiáng)調(diào)頁面元素時使用。下面我們將介紹如何使用 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%);
}
// 添加動畫
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

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

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

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