CSS怎么加動(dòng)圖？
CSS可以用來(lái)加動(dòng)圖，并使其具有互動(dòng)性。讓我們來(lái)學(xué)習(xí)如何加入動(dòng)圖，以及如何讓它更有趣。
首先，我們需要一個(gè)動(dòng)圖。我們可以在GIF工具中創(chuàng)建一個(gè)動(dòng)畫，并將其保存為.gif文件。然后，我們可以將它添加到我們的HTML文檔中。
例如，我們的HTML代碼如下：

<img src="animated.gif">

我們現(xiàn)在可以看到一個(gè)靜態(tài)的動(dòng)圖。但是，我們可以通過(guò)CSS來(lái)實(shí)現(xiàn)互動(dòng)性。
要使動(dòng)圖擁有互動(dòng)性，我們可以使用CSS動(dòng)畫。 CSS動(dòng)畫是一種讓元素運(yùn)動(dòng)或改變形狀的方法。
我們可以使用@keyframes規(guī)則來(lái)定義動(dòng)畫。如下所示：

@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

在上面的示例中，我們定義了一個(gè)名為“rotation”的動(dòng)畫，它從一個(gè)角度旋轉(zhuǎn)到另一個(gè)角度。
現(xiàn)在我們需要將動(dòng)畫應(yīng)用于圖像。我們可以使用animation屬性來(lái)實(shí)現(xiàn)這一點(diǎn)。例如：

img {
animation: rotation 2s infinite linear;
}

在上面的示例中，我們將我們定義的動(dòng)畫“rotation”應(yīng)用于圖像。此外，我們還設(shè)置了動(dòng)畫的持續(xù)時(shí)間（2秒），循環(huán)（infinite）和運(yùn)動(dòng)方式（linear）。
現(xiàn)在，每當(dāng)我們刷新頁(yè)面時(shí)，圖像將旋轉(zhuǎn)。
我們還可以添加更多的動(dòng)畫效果，例如縮放、移動(dòng)等。我們可以使用transform屬性來(lái)實(shí)現(xiàn)這些效果。例如，要使圖像變大，請(qǐng)使用以下代碼：

img:hover {
transform: scale(1.2);
}

在上面的代碼中，我們使用:hover偽類選擇器，表示圖像在鼠標(biāo)懸停時(shí)應(yīng)用該效果。我們使用transform：scale（1.2）屬性來(lái)使圖像變大。
這只是CSS動(dòng)畫的一個(gè)例子。通過(guò)學(xué)習(xí)動(dòng)畫和transform屬性的不同方法，您可以創(chuàng)建出彩的動(dòng)畫效果。
所以，這就是CSS如何加動(dòng)畫的介紹。試著使用這些技巧來(lái)創(chuàng)建令人驚嘆的動(dòng)畫吧！