今天我們來學習一種CSS圖片向上移動的效果，這種效果可以讓網頁更加生動，讓圖片更具有吸引力。 首先，我們需要在HTML代碼中添加一張圖片，如下所示：

<div class="container">
<img src="picture.jpg" alt="picture">
</div>

接下來，我們需要給容器設置一些樣式，如下所示:

.container {
position: relative;
width: 200px;
height: 200px;
}

在這個容器中，我們將設置圖片的上移效果。首先，我們需要將圖片的位置設置為相對位置，這樣才能在容器內調整它的位置。接下來，我們需要設置容器的寬度和高度。 現在，讓我們為圖片設置一些樣式，以實現向上移動的效果。我們使用CSS的過渡屬性來實現這個效果。在我們的CSS代碼中，我們將使用過渡屬性“top”，以實現圖片向上移動。如下所示：

.container img {
position: absolute;
bottom: 0;
transition: top 0.5s ease-out;
}
.container:hover img {
top: -25px;
}

首先，我們將圖片的位置設置為絕對定位，這樣就可以根據容器來定位圖片的位置。然后，我們設置了圖片的底部位置為0，這樣它就在容器的底部了。 最后，我們使用CSS的過渡屬性來實現圖片向上移動的效果。我們使用了“transition: top 0.5s ease-out;”樣式，這表示我們將使用0.5秒的時間來移動圖片的位置，使用“ease-out”表示我們希望圖片在移動過程中有一個緩慢的加速度效果。當鼠標懸停在容器上時，我們將使用“:hover”偽類來設置圖片的位置，將其向上移動25px。 這樣就完成了CSS圖片向上移動效果的實現了！我們可以根據自己的需要來調整過渡屬性中的時間和緩動效果，來實現不同的圖片移動效果。