如何設置html彈跳圖片？
<html>
<head>
<style>
/* 定義彈跳動畫 */
@-webkit-keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(20px); }
100% { transform: translateY(0); }
}
/* 定義彈跳動畫，其他瀏覽器 */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(20px); }
100% { transform: translateY(0); }
}
/* 定義圖片樣式 */
.bounce-image {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
</style>
</head>
<body>
<p>點擊圖片觀看動畫效果:</p>
<img class="bounce-image" src="path/to/image.jpg" onclick="this.classList.toggle('bounce-image')" />
</body>
</html>以上代碼中，我們首先定義了一個彈跳動畫（bounce），然后給圖片（bounce-image）添加了這個動畫，并且設置了無限循環（infinite）。最后添加了一個點擊事件，可以在點擊圖片時開啟和關閉動畫效果。