在Web設計中,有時需要讓圖片彈跳起來,突出顯示其特殊性。這時,我們可以使用CSS設置圖片彈跳的效果。
img { animation-name: bounce; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes bounce { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -30px, 0); } }
首先,我們需要為圖片指定一個動畫名稱,并設置其動畫時間、循環次數和方向。
在下面的代碼塊中,我們定義了一個名為“bounce”的動畫,它會讓圖片從初始位置向上彈到一個位置,然后反彈回來。我們使用了CSS3的3D變換來實現它。
現在,我們已經成功設置了圖片彈跳的效果。你可以嘗試修改動畫時間、循環次數和方向,來獲得不同的效果。另外,如果你需要在指定的元素上應用其他動畫效果,可以繼續向CSS樣式表中添加相應的代碼。