要讓一個圓圈旋轉,我們可以使用CSS中的 transform 屬性和 animation 屬性來實現。具體步驟如下:
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: #555; animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
以上CSS代碼會使一個圓圈以線性運動方式在2秒內無限旋轉。首先,我們定義一個類名為 circle 的元素,并設置寬度和高度為100像素,圓角半徑為50%。接下來,我們給這個元素添加一個顏色為 #555 的背景色,并使用 animation 屬性來指定一個名為 rotate 的關鍵幀動畫。關鍵幀動畫通過 @keyframes 來定義,我們在其中指定圓圈從旋轉0度到旋轉360度的動畫,這里使用了 transform 屬性中的 rotate 函數來實現旋轉。最后,我們將這個動畫設置為無限循環。