今天我們來(lái)學(xué)習(xí)如何使用CSS動(dòng)畫(huà)來(lái)畫(huà)一個(gè)圓形。首先,我們需要?jiǎng)?chuàng)建一個(gè)HTML文件并添加一個(gè)div元素:
<div class="circle"></div>
接下來(lái),我們需要使用CSS樣式將這個(gè)div元素轉(zhuǎn)換成一個(gè)圓形:
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; }
現(xiàn)在我們需要使用CSS動(dòng)畫(huà)使這個(gè)圓形動(dòng)起來(lái)。我們可以使用“@keyframes”關(guān)鍵字來(lái)定義動(dòng)畫(huà):
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
這個(gè)代碼塊定義了一個(gè)從0度旋轉(zhuǎn)到360度的動(dòng)畫(huà)。最后,我們需要將這個(gè)動(dòng)畫(huà)應(yīng)用到我們的div元素上:
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; }
現(xiàn)在,我們的CSS動(dòng)畫(huà)圓形就完成了。它會(huì)無(wú)限制地旋轉(zhuǎn)直到頁(yè)面關(guān)閉。