在CSS中,我們可以使用CSS動畫和樣式來創(chuàng)建一個繁忙圓圈,以下是一個簡單的示例:
HTML結構:
<div class="busy-circle"></div>
CSS樣式:
.busy-circle { position: relative; width: 50px; height: 50px; border: 2px solid #000; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在這個示例中,我們創(chuàng)建了一個名為.busy-circle
的類,用于表示繁忙圓圈,這個類使用了CSS的position
、width
、height
和border
屬性來設置圓圈的基本樣式,并使用border-radius
屬性將其設置為圓形,我們使用animation
屬性來創(chuàng)建一個名為spin
的動畫,該動畫會在1秒內(nèi)從0度旋轉到360度,并且會無限次重復,這個動畫會應用在我們剛剛創(chuàng)建的.busy-circle
類上。
你可以將上述代碼復制到你的CSS文件中,并添加到你的HTML文件中,你可以通過添加class="busy-circle"
到你的HTML元素上來應用這個繁忙圓圈效果,希望這個示例能幫助你實現(xiàn)你想要的效果!