在網頁制作中，我們常常需要使用到圖片，而有時候我們的圖片需要實現上下跳動的效果，那么該如何實現呢？這就需要使用到CSS的動畫效果。

/* 首先我們需要為我們的圖片設置樣式 */
img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
/* 接著，我們定義我們的上下跳動動畫 */
@keyframes jump {
0% {
top: 0;
}
50% {
top: -20px;
}
100% {
top: 0;
}
}
/* 最后，我們將動畫應用到圖片上即可 */
img:hover {
animation: jump 0.5s infinite;
}

代碼解釋：

1. 圖片設置樣式，使其位于父元素的正中間。
2. 定義名為“jump”的動畫。
- 在0%的位置，圖片的上邊緣與父元素上邊緣對齊。
- 在50%的位置，圖片的上邊緣向上移動20個像素。
- 在100%的位置，圖片的上邊緣與父元素上邊緣對齊。
3. 鼠標懸浮到圖片上時，將“jump”動畫應用到圖片上，持續0.5秒，循環無限次。

以上就是使用CSS實現圖片上下跳動的方法了，希望這篇文章能夠幫助到你。