跳動(dòng)圖片是指在網(wǎng)頁中使用CSS動(dòng)畫讓圖片跳動(dòng)起來的效果。實(shí)現(xiàn)這種效果的方法非常簡單,只需要使用CSS3動(dòng)畫的關(guān)鍵幀和屬性即可。
img { animation: jump 0.5s ease-in-out infinite alternate; } @keyframes jump { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
上面的代碼就可以讓圖片跳動(dòng)起來了。其中,animation屬性用來定義動(dòng)畫名稱、時(shí)長、緩動(dòng)效果、是否循環(huán)等參數(shù);@keyframes用來定義關(guān)鍵幀,即動(dòng)畫在不同時(shí)間點(diǎn)的狀態(tài);transform屬性則用來控制圖片的移動(dòng)效果。
需要注意的是,以上代碼只是一個(gè)基礎(chǔ)的跳動(dòng)效果,還可以根據(jù)具體情況進(jìn)行調(diào)整。如調(diào)整跳動(dòng)的高度、時(shí)間、緩動(dòng)效果等參數(shù)。