CSS3可以實現(xiàn)各種有趣的動畫效果，其中轉(zhuǎn)圈圈也是一個很簡單但很實用的效果。下面我們來看看如何使用CSS3來實現(xiàn)轉(zhuǎn)圈圈效果：

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #ccc;
border-top-color: #00bcd4;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

首先，我們創(chuàng)建一個正方形的容器，并設(shè)置它的寬度和高度相等。然后，我們將它的border-radius屬性設(shè)置為50%，使容器變成一個圓形。接著，我們設(shè)置邊框為3px的實線，顏色為灰色，并設(shè)置上部邊框的顏色為藍(lán)色。這樣就可以將圓形容器變成一個有顏色的圓環(huán)。

最后，我們使用關(guān)鍵幀動畫@keyframes來定義“rotate”動畫，從0度開始旋轉(zhuǎn)360度。通過將“rotate”動畫與圓形容器綁定，我們就可以實現(xiàn)旋轉(zhuǎn)的效果。

使用CSS3實現(xiàn)轉(zhuǎn)圈圈動畫，不僅簡單實用，而且效果十分出色。通過使用不同的顏色、速度和方向，我們可以讓轉(zhuǎn)圈圈動畫變得更加有趣和吸引人。趕緊嘗試一下，讓你的網(wǎng)頁更加生動有趣吧！