在網頁設計中，圖片動效的運用可以增強頁面的交互性和用戶體驗。本文將介紹兩種使用CSS實現的圖片動效。

第一種動效為圖片的懸浮效果。當用戶將鼠標懸浮在圖片上時，圖片會有一個放大的效果。代碼如下：

img:hover {
transform: scale(1.2);
transition: transform 0.5s ease;
}

在上述代碼中，transform屬性用于對圖片進行縮放操作，scale(1.2)表示放大1.2倍。同時，transition屬性設置了動效持續時間為0.5秒，以及動效的速度模式為緩動（ease）。

第二種動效為圖片的滾動效果。當用戶滾動頁面時，圖片會有一個漸變出現的效果。代碼如下：

img {
opacity: 0;
transition: opacity 0.5s ease;
}
img.fade-in {
opacity: 1;
}

在上述代碼中，通過opacity屬性來控制圖片的透明度，0表示完全透明，1表示完全不透明。同時，通過transition屬性設置了動效持續時間為0.5秒，以及動效的速度模式為緩動。在對應的HTML元素上添加類名fade-in，以觸發圖片的漸變出現效果。

以上兩種動效都是基于CSS實現的，可不需要通過JavaScript代碼實現。不僅減少了代碼的復雜性，更加提高了頁面的性能。在實際應用中，需要根據具體的頁面設計以及用戶需求來選擇合適的圖片動效。