<div> 圖片動畫是一種通過使用HTML和CSS來給網頁中的圖片添加動畫效果的技術。通過使用div元素和相關的CSS屬性和動畫效果，我們可以輕松地為圖片添加移動，旋轉，縮放，淡入淡出等各種動畫效果。接下來，我們將通過幾個代碼案例來詳細解釋和說明div 圖片動畫的使用方法和效果。

案例一：圖片的移動效果

<div> <img src="image.jpg" alt="圖片"> </div>

我們可以使用CSS的transform屬性來實現圖片的移動效果。將圖片包裹在一個div元素內，然后通過設置div的位置和移動距離來使圖片產生移動效果。

div {
position: relative;
animation: move 3s infinite;
}
<br>
@keyframes move {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}

在上述代碼中，我們使用了CSS的position屬性來設置div元素的定位方式為相對定位（relative），這樣我們可以通過設置left屬性來移動div內的圖片。通過animation屬性，我們定義了一個名為move的動畫，設置了動畫的持續時間為3秒，并將動畫設置為無限循環。在@keyframes規則中，我們定義了動畫的關鍵幀樣式，0%表示動畫開始時的樣式，50%表示動畫進行到一半時的樣式，100%表示動畫結束時的樣式。在這個例子中，圖片會從左邊移動到右邊，然后再回到原來的位置，循環不斷重復。

案例二：圖片的旋轉效果

<div> <img src="image.jpg" alt="圖片"> </div>

我們可以使用CSS的transform屬性來實現圖片的旋轉效果。通過設置div元素的transform屬性和rotation角度來實現圖片的旋轉。

div {
position: relative;
animation: rotate 3s infinite;
}
<br>
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

在上述代碼中，我們定義了一個名為rotate的動畫，設置了動畫的持續時間為3秒，并將動畫設置為無限循環。在@keyframes規則中，我們定義了動畫的關鍵幀樣式，0%表示動畫開始時的樣式，100%表示動畫結束時的樣式。在這個例子中，圖片會以一個中心點為軸心進行旋轉，旋轉一周后再次回到原來的位置，循環不斷重復。

案例三：圖片的縮放效果

<div> <img src="image.jpg" alt="圖片"> </div>

我們可以使用CSS的transform屬性來實現圖片的縮放效果。通過設置div元素的transform屬性和scale縮放比例來實現圖片的縮放。

div {
position: relative;
animation: scale 3s infinite;
}
<br>
@keyframes scale {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}

在上述代碼中，我們定義了一個名為scale的動畫，設置了動畫的持續時間為3秒，并將動畫設置為無限循環。在@keyframes規則中，我們定義了動畫的關鍵幀樣式，0%表示動畫開始時的樣式，50%表示動畫進行到一半時的樣式，100%表示動畫結束時的樣式。在這個例子中，圖片會先放大到原來的1.5倍大小，然后再縮小回原來的大小，循環不斷重復。

通過上述幾個案例，我們可以看到div 圖片動畫是一種簡單且強大的技術，可以為網頁中的圖片添加各種各樣的動畫效果。通過合理地使用CSS屬性和動畫效果，我們可以創造出更加生動和吸引人的網頁設計。