在Web開發中,有時我們需要讓圖片在頁面上上下跳動,來吸引用戶的注意力,此時我們可以使用 CSS 動畫 操作來實現。
img{ position: absolute; /*先將圖片的位置設為絕對定位*/ animation: jump 1s infinite; } @keyframes jump { /*定義跳動動畫*/ from { transform: translate(0,0); } 50% { transform: translate(0,-20px); } to { transform: translate(0,0); } }
以上代碼中,我們使用了CSS3中的animation
屬性來實現動畫效果。我們將圖片的位置設為絕對定位,然后定義了一個名為jump
的動畫,設置了動畫的時間為1秒,并使用infinite
參數來讓動畫無限循環。
接下來,我們定義了動畫的三個狀態:
from
狀態:表示動畫開始時的狀態,將圖片的位置設為原來的位置(沒有任何位移);50%
狀態:表示動畫進行到一半的狀態,將圖片的位置向上移動20像素;to
狀態:表示動畫結束時的狀態,同from
狀態。
這樣就實現了一個簡單的圖片上下跳動效果。你可以根據自己的需要修改動畫參數,調整跳動的幅度、速度等等。
上一篇css追加一段html
下一篇圖片css 等比例縮放