CSS實現圖片彈跳效果

一、使用CSS3的animation實現圖片彈跳效果

在這個方案中，我們通過CSS3的animation屬性來實現圖片的彈跳效果。具體的做法是，先定義一個CSS3的@keyframes動畫，然後將該動畫綁定到目標元素上。下面是詳細的代碼實現。

<style>
  .bounce {
    animation: bounce 1s infinite;
  }
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
</style>
<img src="image.jpg" alt="image" class="bounce">

上面代碼中，我們定義了一個名為bounce的動畫，該動畫的作用是讓目標元素垂直向上彈跳，並在頂部停留一段時間，然後再垂直向下彈跳並回到原位，最終形成類似彈簧的效果。

二、使用CSS3的transition實現圖片彈跳效果

在這個方案中，我們通過CSS3的transition屬性來實現圖片的彈跳效果。具體的做法是，通過目標元素的hover事件來觸發CSS3的transition，使得目標元素在一段時間內產生位移，從而形成彈跳的效果。

<style>
  .bounce {
    transition: all 0.3s ease-in-out;
  }
  .bounce:hover {
    transform: translateY(-10px);
  }
</style>
<img src="image.jpg" alt="image" class="bounce">

上面代碼中，我們給目標元素綁定了一個CSS3的過渡效果，該效果的作用是在0.3秒的時間內，使目標元素在垂直方向上向上位移一段距離，從而形成彈跳效果。當滑鼠移除目標元素時，元素將回到原位。

三、使用jQuery實現圖片彈跳效果

在這個方案中，我們將使用jQuery庫來實現圖片的彈跳效果。具體的做法是，通過jQuery的animate方法來控制目標元素的位移，並設置動畫完成後的回調函數，從而實現彈跳效果。

<script src="jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".bounce").on("mouseenter", function() {
      $(this).animate({ top: "-=10px" }, 200, function() {
        $(this).animate({ top: "+=10px" }, 200);
      });
    });
  });
</script>
<img src="image.jpg" alt="image" class="bounce" style="position:relative;top:0;">

上面代碼中，我們使用jQuery的on方法來綁定目標元素的mouseenter事件，當滑鼠進入該元素時，將會執行我們編寫的動畫函數。在動畫函數中，我們首先將目標元素向上移動10像素，然後在0.2秒的時間內，再將元素向下移動10個像素，形成彈跳效果。

四、結論

本文介紹了三種實現圖片彈跳效果的方案，分別是使用CSS3的animation屬性、使用CSS3的transition屬性和使用jQuery庫。三種方案各有特點，可以根據具體需要選擇。其中，使用CSS3的animation屬性可以實現較為複雜的動畫效果，但是對於對瀏覽器兼容性的要求較高；使用CSS3的transition屬性則適用於一些簡單的動畫效果，適合用於增強用戶體驗。最後，使用jQuery實現彈跳效果則可以結合CSS來實現較為靈活的動畫，但需要載入jQuery庫。