CSS是一種用于呈現(xiàn)HTML網(wǎng)頁(yè)的樣式表語(yǔ)言，它可以讓我們以各種方式美化網(wǎng)頁(yè)元素。今天，我要為大家介紹如何使用CSS實(shí)現(xiàn)一個(gè)環(huán)形圓。

.circle {
width: 100px;
height: 100px;
border: 2px solid red;
border-radius: 50%;
position: relative;
}
.circle::before {
content: "";
display: block;
position: absolute;
top: -2px;
left: -2px;
width: 100%;
height: 100%;
border: 2px solid transparent;
border-top-color: red;
border-right-color: red;
border-radius: 50%;
animation: spin 2s ease infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

上面的代碼使用了CSS的pseudo-element ::before來(lái)創(chuàng)建一個(gè)裝飾層，然后通過(guò)border-top-color和border-right-color屬性給它添加兩個(gè)不同顏色的邊框顏色，從而形成環(huán)形的效果。最后，使用CSS3的transform屬性實(shí)現(xiàn)圓環(huán)的旋轉(zhuǎn)動(dòng)畫。

下面是HTML代碼，只需要在

<div class="circle"></div>