HTML中的純CSS設(shè)置轉(zhuǎn)圈，是一種比較有趣的效果。下面我們就通過pre標簽來展示CSS代碼，讓大家看看怎樣使用CSS來設(shè)置轉(zhuǎn)圈效果吧！

/* 首先，我們要給圓盤設(shè)置寬高和邊框 */
.circle {
width: 100px;
height: 100px;
border: 5px solid #000;
border-radius: 50%;
position: relative; /* 為了讓旋轉(zhuǎn)點在圓心 */
}
/* 接著，我們需要設(shè)置旋轉(zhuǎn)動畫 */
.circle::before {
content: "";
display: block;
width: 60px;
height: 60px;
border: 5px solid #000;
border-top-color: transparent;
border-radius: 50%;
position: absolute;
top: -25px;
left: -25px;
animation: rotate 1s linear infinite; /* 關(guān)鍵是這個旋轉(zhuǎn)動畫 */
}
/* 最后，我們需要定義旋轉(zhuǎn)動畫的細節(jié) */
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

通過以上CSS代碼，我們就可以讓一個圓圈繞自身中心不停地旋轉(zhuǎn)起來，從而實現(xiàn)純CSS設(shè)置轉(zhuǎn)圈的效果。